使用javascript添加的表單元素不是從post方法發送的

Question

似乎這個問題重複出現，但我的問題有點不同，我沒有在其他問題中找到答案，所以我將它作爲新線程開始。

我有一個表單，其中有一個點擊鏈接，將在div上添加html內容，用戶可以添加多次。但是當我提交表格。第一次使用JavaScript添加的字段通過表單提交，但如果我多次添加，則第二個和後一個表單的數據不會通過表單發佈。 我已經在下面發佈了我的代碼，任何人都可以幫助我找到並解決問題。

<form action="<?php echo $this->getUrl('children/index/addChild') ?>" method="post" id="form-validate" autocomplete="off"> 

    <div class="fieldset"> 
     <?php //echo $this->getBlockHtml('formkey')?> 
     <h2 class="legend"><?php echo $this->__('Child Name') ?></h2> 
     <?php if(sizeof($model)==0): ?> 



     <a href="javascript:show()" id="addchild">Add Child</a> 

    <div id="child" style="display:none;"> 
     <li> 
      <div class="field"> 
        <label for="firstname" class="required"><em>*</em><?php echo $this->__('First Name') ?></label> 
        <div class="input-box"> 
         <input type="text" name="firstname" id="firstname" value="<?php ?>" title="<?php echo $this->__('First Name') ?>" class="input-text required-entry" /> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="lastname" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label> 
        <div class="input-box"> 
         <input type="text" name="lastname" id="lastname" value="<?php ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" /> 
        </div> 
      </div>   
     </li> 
     <li> 
      <div class="field"> 
        <label for="schoolname" class="required"><em>*</em><?php echo $this->__('School Name') ?></label> 
        <div class="input-box"> 

         <select id='schoolname' name='schoolname'> 
          <option value="0">Select School</option> 
          <?php foreach ($schools as $key => $school): ?> 
           <option value="<?php echo $school['school_id']; ?>"><?php echo $school['school_name'] ?></option> 
          <?php endforeach;?> 


         </select> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="year" class="required"><em>*</em><?php echo $this->__('Year') ?></label> 
        <div class="input-box"> 
         <input type="text" name="year" id="year" value="<?php ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" /> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="class"><?php echo $this->__('Class(if applicable)') ?></label> 
        <div class="input-box"> 
         <input type="text" name="class" id="class" value="<?php ?>" title="<?php echo $this->__('Class') ?>" class="input-text" /> 
        </div> 
      </div> 
     </li> 
     <button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button> 
    </div> 
<?php else: ?> 
<?php $i=1; 
foreach ($model as $key => $value): ?> 
    <div id="child"> 
     <?php 
     $arr = array(); 
     $id= $value['child_id']; 

     ?> 
     <!-- <button type="button" id="removechild">Remove Child</button> --> 
     <a href="javascript:remove('<?php echo $id; ?>')" id="removechild">Remove Child</a> 
     <li> 
      <input type="hidden" value="<?php echo $id; ?>" name="childid<?php echo $i ?>" /> 
      <div class="field"> 
        <label for="firstname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('First Name') ?></label> 
        <div class="input-box"> 
         <input type="text" name="firstname<?php echo $i ?>" id="firstname<?php echo $i ?>" value="<?php echo $value["firstname"]; ?>" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" /> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="lastname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Last Name') ?></label> 
        <div class="input-box"> 
         <input type="text" name="lastname<?php echo $i ?>" id="lastname<?php echo $i ?>" value="<?php echo $value['lastname']; ?>" title="<?php echo $this->__('Last Name') ?>" class="input-text required-entry" /> 
        </div> 
      </div>   
     </li> 
     <li> 
      <div class="field"> 
        <label for="schoolname<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('School Name') ?></label> 
        <div class="input-box"> 

         <select id='schoolname<?php echo $i ?>' name='schoolname<?php echo $i ?>' value='<?php echo $value['school_id'] ?>' > 
          <option value="0">Select School</option> 
          <?php foreach ($schools as $key => $school): ?> 
           <option value="<?php echo $school['school_id']; ?>" <?php if($school['school_id']==$value['school_id']){echo "selected" ;} ?> ><?php echo $school['school_name'] ?></option> 
          <?php endforeach;?> 


         </select> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="year<?php echo $i ?>" class="required"><em>*</em><?php echo $this->__('Year') ?></label> 
        <div class="input-box"> 
         <input type="text" name="year<?php echo $i ?>" id="year<?php echo $i ?>" value="<?php echo $value['age']; ?>" title="<?php echo $this->__('Year') ?>" class="input-text required-entry" /> 
        </div> 
      </div> 
      <div class="field"> 
        <label for="class<?php echo $i ?>"><?php echo $this->__('Class(if applicable)') ?></label> 
        <div class="input-box"> 
         <input type="text" name="class<?php echo $i ?>" id="class<?php echo $i ?>" value="<?php echo $value['class']; ?>" title="<?php echo $this->__('Class') ?>" class="input-text" /> 
        </div> 
      </div> 
     </li>  

    </div> 
<?php $i++; ?> 

<?php endforeach; ?> 
<input type="hidden" value="<?php echo $i; ?>" name="count" /> 
<div id="addition"></div> 
<a href="javascript:duplicate(this.val)" id="anotherchild" value="1">Add Another Child</a> 
<input type="hidden" id="test" value="0" name="test"/> 

<button type="submit" title="<?php echo $this->__('Save') ?>" class="button"><span><span><?php echo $this->__('Save') ?></span></span></button> 
<?php endif; ?> 
</form> 

和腳本是

function duplicate(){ 


    var id=document.getElementById('test').value; 

    var div = document.createElement('div'); 

    div.className = "row"+id; 

    div.innerHTML = '<label for="firstname" class="required"><em>*</em><?php echo $this->__("First Name") ?></label><div class="input-box"><input type="text" name="firstname'+id+'" id="firstname'+id+'" title="<?php echo $this->__("First Name") ?>" class="input-text required-entry" /></div><label for="lastname" class="required"><em>*</em><?php echo $this->__("Last Name") ?></label><div class="input-box"><input type="text" name="lastname'+id+'" id="lastname'+id+'" title="<?php echo $this->__("Last Name") ?>" class="input-text required-entry" /></div><label for="schoolname" class="required"><em>*</em><?php echo $this->__("School Name") ?></label><div class="input-box"><select id="schoolname'+id+'" name="schoolname'+id+'"><option value="0">Select School</option><?php foreach ($schools as $key => $school): ?><option value="<?php echo $school["school_id"]; ?>" <?php if($school["school_id"]==$value["school_id"]){echo "selected" ;} ?> ><?php echo $school["school_name"] ?></option><?php endforeach;?></select></div><label for="year" class="required"><em>*</em><?php echo $this->__("Year") ?></label><div class="input-box"><input type="text" name="year'+id+'" id="year'+id+'" title="<?php echo $this->__("Year") ?>" class="input-text required-entry" /></div><label for="class"><?php echo $this->__("Class(if applicable)") ?></label><div class="input-box"><input type="text" name="class'+id+'" id="class'+id+'" title="<?php echo $this->__("Class") ?>" class="input-text" /></div>'; 

    document.getElementById('addition').appendChild(div); 
    document.getElementById('test').value= ++id; 


} 

不要理會混亂的代碼，我只是想添加HTML在JavaScript中DIV命名爲「加法」。 讓我更清楚地解釋我的情況。有一個鏈接到「添加另一個孩子」，當我點擊這個鏈接時，出現的JavaScript塊內的HTML塊「添加」。我也可以添加多個孩子。但提交時只提交一個孩子。 任何人都可以幫忙please.Any建議表示讚賞。

Answer 1

請參閱此jsfiddle。它已經提交了處理程序，它將您的數據序列化並將其發送到服務器。

$('#form-validate').on('submit', function (e) { 
    //prevent the default submithandling 
    e.preventDefault(); 
    alert($(this).serialize()) 
    //send the data of 'this' (the matched form) to yourURL 
    $.post('yourSubmitUrl.php', $(this).serialize()); 
});