通过Jquery动态添加的表单元素只在value属性中设置值


Form elements added dynamically via Jquery only post value when set in value attribute

我有一个html表单(在php中生成),如果用户从选择中选择一个特定的值,则通过jQuery添加额外的输入字段。

在处理页面中,新字段的值没有通过-参见来自phpinfo()的导出:

_POST["child"]  
Array
(
[1] => Array
    (
        [label] =>  
        [id] => 
    )
[2] => Array
    (
        [label] =>  
        [id] => 
    )
[3] => Array
    (
        [label] =>  
        [id] => 
    )
[4] => Array
    (
        [label] =>  
        [id] => 
    )
[5] => Array
    (
        [label] =>  
        [id] => 
    )
)

但是,如果我在jquery添加的html中设置value属性,该值就会显示出来。有人对这个问题有经验吗?

任何想法?

提前感谢!

编辑:html形式:

<input type='hidden' name='orderIds' id='orderIds'/>
<input type="hidden" name="changeNums" id="changeNums"/>
<input type="hidden" name="changeIds" id="changeIds"/>
<input type='hidden' name='fromPage' id='fromPage' value='/new/admin/extra_info.php?'/>
<input type='hidden' name='table' id='table' value='extra_info'/>
 <input type="hidden" name="splitPageNum" id="splitPageNum" value=""/><div align='center'><div class='popUpS' align='center' id='popUp'><div align='right' id='closeDiv' class='off' onmouseover="this.className='offOver'" onmouseout="this.className='off'"><a class='off' href='javascript:closePopUp()'>X</a></div><div align='center'class='noticeBar'id='noticeBar'></div><br/><div id='newOrderTr'><div class='formPrompt'>Order</div><div class='formInput'><select class='formInput' name='orderNumber' id='orderNumber'><option value=''>-Select-</option><option value='1'>Before Select Kashrus</option><option value='2'>Before Select Kashrus</option><option value='3'>Before Select Kashrus</option><option value='4'>After Select Kashrus</option></select></div><br/></div><div class="formPrompt">Active</div><div class="formInput"><select class="formInput" name="Active" id="Active"><option value="">-Select-</option><option  value="Active">Active</option><option  value="Inactive">Inactive</option></select></div><br/><div class='formPrompt'>Field Label</div><div class='formInput'><input type='text' class='formInput' name='label' id='label'/></div><br/>
<div class='formPrompt'>Field Type</div><div class='formInput' id='container_fieldType'><select class='formInput' name='fieldType' id='fieldType'><option value=''>-Select-</option>
<option value='0'>Short Text</option><option value='1'>Long Text</option><option value='2'>Drop Down</option></select></div><br/><div class='formPrompt'>Is Required</div><div class='formInput' id='container_isRequired'><select class='formInput' name='isRequired' id='isRequired'><option value=''>-Select-</option>
<option value='1'>Yes</option><option value='0'>No</option></select></div><br/><div class='clearFloats' style='width:600px;text-align:center;'><input type='submit' value='Submit'/></div></div></form>

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type='text/javascript'>
$('#fieldType').bind('change', function(){
    if($('#fieldType').val() == 2){
        if($('#rowId').val() != 'new'){
            getVals($('#rowId').val());
        }
        $('#container_fieldType').after('<div id="child_form">' + $('#childFormHTML').html() + "<input type='hidden' name='child_table' value='extra_info_values'/><input type='hidden' name='child_table_fields' value='label'/></div>")
    }
    else{
        if($('#child_form').html())
            if(confirm("Do you want to delete all values?"))
                $('#child_form').remove()
    }

});
function getVals(rowId){
    $.get('ajax/getVals.php?rId=' + rowId, function(data) {
        if(data != ''){
            $('#childFormHTML').html(data);
    }
    });
}

</script>

添加:

<div id='childFormHTML' style='display:none;'>
<br class='clear:both;'/><div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[1][label]' value=' ' name='child[1][label]' class='formInput'/><input type='hidden' name='child[1][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[2][label]' value=' ' name='child[2][label]' class='formInput'/>   <input type='hidden' name='child[2][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div><div class='formInput'><input type='text' id='child[3][label]' value=' ' name='child[3][label]' class='formInput'/>
<input type='hidden' name='child[3][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div>
<div class='formInput'><input type='text' id='child[4][label]' value=' ' name='child[4][label]' class='formInput'/><input type='hidden' name='child[4][id]'/></div>
<br class='clear:both;'/><br class='clear:both;'/>
<div class='formPrompt'>Value</div><div class='formInput'><input type='text' id='child[5][label]' value=' ' name='child[5][label]' class='formInput'/><input type='hidden' name='child[5][id]'/></div><br class='clear:both;'/></div>

因为你的html是动态插入的,所以你需要使用:

$ (" # form-container ") .delegate("形式"、"提交"、函数(事件){});