Question

我有两种形式

first_form用于加载新输入数据的ajax请求，该输入数据在second_form中显示为输入字段（已经完成）
second_form将提交自己的所有数据以及first_form（这是未实现的）

first_form使用form-inline水平显示输入，而另一种形式是普通形式，因此我无法将这两种形式合并。

因此，当用户点击second_form的提交按钮时，我想发送所有数据以及first_form的数据。

示例：

<form id="first_form" class="form-inline">
<input type="text" />
<input type="text" />
<button type="submit" class="btn btn-primary">Load</button> // This loads fields for second form

</form>

<form id="second_form">
<div class="loaded_data"> // this div is loaded with ajax
<input type="text" />
<input type="text" />
<button type="submit" class="btn btn-primary">Save</button> // This must send all fields of first and second form
</div>
</form>

我不想将ajax用于第二种形式。将提交表格并调用Laravel控制器的存储方法进行进一步处理

Answer 1

使用jQuery，您可以访问serialize方法。您可以从表单1中获取所有数据，并将其添加到$.ajax调用中的表单2数据中。

var form1Data = $('#first_form').serialize();

然后您可以将form1Data与第二个表单一起发送：

$.ajax({
    method: 'POST',
    url: 'server/form.php',
    data: {
        form1: form1Data,
        form2: $('#second_form').serialize();
    }
})
.done(function( msg ) {
    console.log('all done:', msg);
});

Answer 2

当第二个表单提交时，您可以使用jquery从second_form获取值到first_form：

$('#second_form').submit(function({
   $('#in_1_1').val($('#in_2_1').val());
   $('#in_1_2').val($('#in_2_2').val());
});

在HMTL中为输入添加ID：

<form id="first_form" class="form-inline">
<input type="text"  id="in_1_1"/>
<input type="text"  id="in_1_2"/>
<button type="submit" class="btn btn-primary">Load</button> // This loads fields for second form
</form>

<form id="second_form">
  <div class="loaded_data"> // this div is loaded with ajax
  <input type="text" id="in_2_1" />
  <input type="text" id="in_2_2" />
  <button type="submit" class="btn btn-primary">Save</button> // This must send all fields of first and second form
  </div>
</form>

提交当前表格的数据以及其他表格

2 个答案: