使用AJAX提交重复的表单数据并保存在laravel的数据库中

Question

我正在制作此表单的副本，我可以通过ajax保存数据，但是当我当时使用锚标记添加相同的表单时，我想要两个表单数据，我该如何使用ajax来做到这一点？ 这是我的表格

<form action="" method="POST" enctype="multipart/form-data" id="addCustomField">
               
                              <input
                                  type="text"
                                  class="form-control"
                                  required
                                  id="customInputName"
                                  name="customInputName"
                                  placeholder="Pool Party"
                                  aria-label="Pool Party"
                      <div class="col-md-10">
                          <div class="form-check mb-2">
                              <input class="form-check-input" type="checkbox" value="required" id="required" name="validation[]" checked />
                              <label class="form-check-label" for="required">Required</label>
                          </div>
                          <div class="form-check mb-2">
                              <input class="form-check-input" type="checkbox" value="alpha" id="alpha" name="validation[]" />
                              <label class="form-check-label" for="alpha">Alphabets Only</label>
                          </div>
                          <div class="form-check mb-2">
                              <input class="form-check-input" type="checkbox" value="/^[a-zA-Z\s]+$/" id="alphaSpace" name="validation[]" />
                              <label class="form-check-label" for="alphaSpace">Alphabets with Space</label>
                          </div>
                          <div class="form-check mb-2">
                              <input class="form-check-input" type="checkbox" value="number" id="number" name="validation[]" />
                              <label class="form-check-label" for="number">Number Only</label>
                          </div>
              </form>

使用javascript我正在制作表单的副本

 function duplicateForm() {
            var elmnt = document.getElementById("addCustomField");
            var cln = elmnt.cloneNode(true);
            document.getElementById("customField").appendChild(cln);
        }

我想知道如何保存每个表单数据以及如何通过ajax传递，我像这样传递第一个单一表单数据

function insertData(){
    $.ajaxSetup({
      headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
      });
      var formData = new FormData();
      
      formData.append('customInputName',$('#customInputName').val());
      formData.append('inputType',$('#inputType').val());
      var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
      var checkedValues = [];
      for (var i = 0; i < checkboxes.length; i++) {
          checkedValues.push(checkboxes[i].value);
      }
      formData.append('checkedValues', JSON.stringify(checkedValues));
          $.ajax({
                  type: 'POST',
                  dataType: 'json',
                  url: '{{ url('/inputForm') }}',
                  data: 
                    formData,
                      // checkedValues: checkedValues
                  contentType: false,
                  processData: false, 
                  success: function(response) {
                      console.log(response);
                      var successDiv = document.getElementById('successMessage');
                      successDiv.innerHTML = response.message;
                      successDiv.classList.add('alert', 'alert-success');
                  } 
              });
  }

Answer 1

已克隆整个表单，您只能在 div 内容中克隆

<form>
 <div id="clone">
   #your existing code 
  </div>
  <div class="newclone">
  </div>
</form>

Javascript代码

   function appendform() {          
        var newthing = $('#clone').clone();           
        $('.newclone').append(newthing);
    }

最后现在像往常一样，您现有的提交代码可以像 Formdata() 一样运行良好 所以现在新的附加字段仅出现在表单内。 对于多个值，您应该验证名称是否应采用数组格式，如 customInputName[]