如何動態地添加自定義字段到窗體使用jQuery

Question

我抄了jQuery提交之前，但我不知道如何去管理它。我試了很多辦法做到這一點，嘗試了更多的代碼了。

var rowNum = 0; 
function addRow(frm) { 
    rowNum ++; 
    var row = '<p id="rowNum' + rowNum + '"><?= form_input('Day#', '+frm.day_no.value+', 'placeholder="Day#"')?> 
    <?= form_input('Day#', '+frm.description.value+', 'placeholder="Day#"')?> 
    <input type="button" value="Remove" onclick="removeRow('+rowNum+');"> 
    </p>'; 
    jQuery('#itemRows').append(row); 
    frm.day_no.value = ''; 
    frm.description.value = ''; 
} 

function removeRow(rnum) { 
    jQuery('#rowNum'+rnum).remove(); 
} 

<ul> 
    <li> 
    <label><?= form_input('Day#', '', 'placeholder="Day#"')?></label> 
    </li> 
    <li> 
    <label><?= form_input('Description', '', 'placeholder="Description"')?></label> 
    </li> 
    <label> 
    <input type="button" value="add field" name="add field"> 
    </label> 
</ul> 

我想這一個了：這樣我已經嘗試了更多的代碼我已檢查了錯誤，但因爲我是新所以它很難搞清楚什麼與怎麼回事。

<div class="col-md-4 publish"> 
    <h4>Day Plan</h4> 
    <div class="line"></div> 
    <ul> 
     <div class="items"> 
     <div class="form-group"> 
     <li><label><input id="day_no" class="form-control" name="day_no" 
     required="required" type="NUMBER" placeholder="Day #" /></li> 
      <li><label><input id="description" class="form-control" 
      name="description" required="required" type="TEXTAREA" 
      placeholder="Description" /></label></li></div> 
      <label><button type="button" class="add_field_button">Add 
      Field</button> </label> 
     </div> 

     <script 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 
     </script> 
     <script> 
      $(document).ready(function() { 
       var max_fields = 20; 
       var wrapper = $("#items"); 
       var add_button = $(".add_field_button"); 

       //var x = 2; 
       $(add_button).click(function(e){ 
        e.preventDefault(); 
        if(x < max_fields){ 
         x++; 
         $(wrapper).append(' <ul> 
          <div class="form-group"> 
          '<li><label><input id="day_no" class="form- 
          control" name="day_no" required="required" 
          type="NUMBER" placeholder="Day #" /></label> 
          </li>' 
          '<li><label><input id="description" 
          class="form-control" name="description" 
           required="required" type="TEXTAREA" 
           placeholder="Description" /></label></li>' + 
           '<a href="#" class="remove_field"><i class="fa 
           fa-times"></a></div></ul>' 
        ); 

        } 
       }); 

       $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--; 
       }) 
      }); 
     </script> 

    </ul> 

this is the form

Answer 1

我想這和它的工作對我來說。

  <div class="input-group control-group after-add-more"> 


       <label><input type="text" name="dayplans[title][]" class="form-control" placeholder="DAY #"></label> 
       <label><textarea name="dayplans[description][]" class="form-control" placeholder="Description" style="margin: 0px; width: 196px; height: 56px;"></textarea></label> 
       <div class="input-group-btn"> 
        <button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button> 
       </div> 
      </div> 

      <!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,--> 
      <div class="copy-fields" style="display: none"> 
       <div class="control-group input-group" style=""> 
        <label><input type="text" name="dayplans[title][]" class="form-control" placeholder="DAY #"></label> 
        <label><textarea name="dayplans[description][]" class="form-control" placeholder="Description" style="margin: 0px; width: 196px; height: 56px;"></textarea></label> 
        <div class="input-group-btn"> 
         <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button> 
        </div> 
       </div> 
      </div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 

      //here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class. 
      $(".add-more").click(function(){ 
       var html = $(".copy-fields").html(); 
       $(".after-add-more").after(html); 
      }); 
//here it will remove the current value of the remove button which has been pressed 
      $("body").on("click",".remove",function(){ 
       $(this).parents(".control-group").remove(); 
      }); 

     }); 
</script>