How to send all the values of a dynamic input field to the action page and `echo` an `Ordered List` with the values?

时间:2017-11-13 06:09:13

标签: javascript php forms jquery-ui

In my form, I have made a dynamic text input field using jQuery and made it sortable using jQuery-UI. But the problem it, when I submit the form, only the last value of the form is sent to the action page.

How can I send all the values to the form action page and echo an Ordered List with the values?

Thanks in advance for your suggestions. Here is the snippet of the dynamic form:

    $(document).ready(function() {
       var fixHelperModified = function(e, div) {
             var $originals = div.children();
             var $helper = div.clone();
             $helper.children().each(function(index) {
                $(this).width($originals.eq(index).width())
             });
             return $helper;
          },
          updateIndex = function() {
             $('div.index').each(function(i) {
                $(this).html(i + 1);
             });
          };
       $("#add").sortable({
          helper: fixHelperModified,
          stop: updateIndex
       }).disableSelection();
       $("#addNew").click(function() {
          $('#add').append("<div class='row rem' id='move'><div class='col-md-1 index'>1. </div><div class='col-md-9'><input type='text' class='form-control' name='members'></div><div class='col-md-1'><button class='delete btn btn-warning btn-xs'>Delete</button></div></div>");
          updateIndex();
       });
       $("body").on('click', '#add .delete', function() {
          $(this).closest(".rem").remove();
          updateIndex();
       });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form method="post" id="members" class="form-horizontal" action="pritnPreview.php">
   <fieldset>
      <div class="form-group">
         <div class="col-sm-2">
            <label class="form-name">Members</label>
         </div>
         <div class="col-sm-8">
            <div class="row">
               <div id='add'>
                  <div class='row rem' id='move'>
                     <div class='col-md-1 index'>1. </div>
                     <div class='col-md-9'>
                        <input type='text' class='form-control' name='members'>
                     </div>
                     <div class='col-md-1'>
                        <button class='delete btn btn-warning btn-xs'>Delete</button>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="form-group">
                  <div class="col-md-2">
                     <button id='addNew' type="button" href="#">Add another</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </fieldset>
   <input type="submit" name="submitSave" value="Submit"> 
</form>

The printPreview.php page:

<?php 
    if (!empty($_POST['cc'])) echo 'CC: ' . $cc; 
    ?>

1 个答案:

答案 0 :(得分:1)

Change the name of the input to cc[] to save a array of values

 name='cc[]'