Блог

Главная - Вопросы по программированию - Как передать значение uuid во все поля ввода формы, которые добавляются динамически с помощью JavaScript?

Как передать значение uuid во все поля ввода формы, которые добавляются динамически с помощью JavaScript?

#javascript #php #jquery #ajax

Вопрос:

В моей форме есть текстовое поле uuid. Uuid генерируется автоматически. Я хочу передать этот uuid всем динамически добавляемым полям. Форма ниже содержит два поля, одно из которых предназначено для идентификатора uuid, а другое-для номера артикула. Пожалуйста, будьте добры, проводите меня.

 <html>
<body>
         <form>
        <table id="dynamic_field">
             <td>
              <div>
               <input type="hidden" class="form-control"  name="uuid[]"/>
              </div>
             </td>
             
             <td>amp;nbsp;</td>
            
             <td>
              <div>
               <label>Enter SKU</label>
                <input type="text" class="form-control"  name="SKU[]" />
              </div>
             </td>
    <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td> 
            <input type="submit" name="submit" id="submit" value="Submit">
        </table>
            </form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
        
            <script type="text/javascript">
              $(document).ready(function(){
                var max_input = 7;
                var i = 1;
            
              $("#add").click(function(){if (i < max_input) {
                  i  ;
                  $('#dynamic_field').append('<tr id="row' i '"><td><div><input type="hidden" class="form-control"  name="uuid[]"/></div></td><td>amp;nbsp;</td><td><div><label>Enter SKU</label><input type="text" class="form-control"  name="SKU[]" /></div></td><td>amp;nbsp;</td><td valign="bottom"><button type="button" name="remove" id="' i '" class="btn btn-danger btn_remove">X</button></td></tr><tr><td>amp;nbsp;</td><td>amp;nbsp;</td></tr>');  
                }});
            
                $(document).on('click', '.btn_remove', function(){  
                  var button_id = $(this).attr("id");   
                  $('#row' button_id '').remove();  
                });
            
                $("#submit").on('click',function(){
                  var formdata = $("#main-form").serialize();
                  $.ajax({
                    url   :"action.php",
                    type  :"POST",
                    data  :formdata,
                    cache :false,
                    success:function(result){
                      alert(result);
                      $("#main-form")[0].reset();
                    }
                  });
                });
              });
            </script>
Метки: ,