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

【问题标题】：Submit data of current form along with other form as well提交当前表格的数据以及其他表格
【发布时间】：2018-01-05 13:20:13
【问题描述】：

我有两种形式

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 控制器的 store 方法进行进一步处理

【问题讨论】：

为什么不直接使用 AJAX 调用？
我们总是乐于帮助和支持新的编码员，但您需要先帮助自己。 :-) 在doing more research 之后，如果您有问题发布您尝试过的方法，并清楚地解释什么不起作用并提供a Minimal, Complete, and Verifiable example。阅读How to Ask 一个好问题。请务必take the tour 并阅读this。
@Raj 这是链接，请尝试使用此stackoverflow.com/questions/7843355/…
@JayBlanchard 我正在使用 laravel，它会在提交第二个表单时调用 store 方法。所以我希望它是一个正常的表单提交而不是 ajax
你不相信给表单元素一个名称属性吗？

标签： php jquery html forms laravel

【解决方案1】：

提交第二个表单时，您可以使用 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>

【讨论】：

做或不做，没有“尝试”。 好的答案将始终解释所做的事情以及为什么以这种方式完成，不仅是为了 OP，也是为了 SO 的未来访问者。跨度>

【解决方案2】：

使用 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);
});

【讨论】：