Comment ajouter des champs personnalisés dynamiquement au formulaire avant de soumettre avec jQuery

Question

J'ai copié le jQuery mais je n'ai aucune idée de comment le gérer. J'ai essayé plusieurs façons de le faire, j'ai essayé quelques autres codes aussi.

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> 

i essayé celui-ci aussi: comme ça, je l'ai essayé deux ou plusieurs codes j'ai vérifié pour les erreurs, mais comme je suis nouveau donc difficile de comprendre ce qui se passe avec elle.

<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

J'ai essayé et cela a fonctionné pour moi.

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