Wie benutzerdefinierte Felder dynamisch dem Formular vor dem Senden mit jQuery hinzugefügt werden

Question

Ich habe die jQuery kopiert, aber ich habe keine Ahnung, wie Sie es verwalten. Ich habe viele Möglichkeiten ausprobiert, ein paar mehr Codes ausprobiert.

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> 

Ich habe versucht, diese auch: Mag ich ein paar mehr Codes versucht, habe ich für die Fehler überprüft haben, aber, wie ich bin hier so ist es schwer, um herauszufinden, was mit ihm los ist.

<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

habe ich versucht, dies und es funktionierte für mich.

  <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>