javascript - 如何使用 JavaScript 将多个 HTML 表单作为一个表单提交给 PHP 脚本？

Question

注意 我意识到这是非常不寻常的，也不是真正的“正确”方式，但这是这个 Wizard 插件的设置方式，而且 Wizard 已经使用这个 jQuery 插件构建，所以我会想找出一种方法将数据作为 1 FORM POST 提交到我的 PHP 脚本

我正在开发一个使用 Bootstrap 的表单向导。它不同于我之前在 JavaScript 和前端开发中为 FORM 工作过的任何东西，因为它不是一个 HTML FORM，所有表单字段都在一个表单中，它被分解成单独的表单。

此向导的 jquery 插件代码位于此处 https://github.com/sathomas/acc-wizard

这里有一个现场演示，可以看到上述向导的运行情况 http://sathomas.me/acc-wizard/#prerequisites

向导中的每个步骤都包含在它自己的 <form> 中标签。

所以在向导的最后/最后一步，而不是 NEXT按钮，有一个 Submit按钮。

现在显然这只会提交最后一个 <form>提交按钮/字段附加到。

我需要以某种方式让“提交”按钮将向导中的所有表单提交到一个 PHP 脚本并让它运行 POST作为一个单独的项目数组，而不是每个表单都是单独的。

我对 JavaScript 的了解还不够好，无法确切地知道如何去做这件事，因为我以前从未见过这样做! jQuery 也可用于此项目。我将不胜感激任何想法和帮助使它起作用并能够使用最后一个提交按钮将多个表单作为一个表单提交。

表格 1

<form id="form-test-1">
  <p>
        Select a Channel Letter Sign Type
        <select name="channel_type" class="form-control" id="channel_type" size="1">
          <option value="1">Front Lit</option>
          <option value="2">Reverse Lit (Halo)</option>
          <option value="3">Front Lit &amp; Back Lit</option>
          <option value="4">Reverse Pan Exposed Neon</option>
          <option value="5">Open Face</option>
          <option value="6">Reverse Pan Exposed Neon &amp; Backlit</option>
        </select>
  </p>
<div class="acc-wizard-step"><button class="btn btn-primary" type="">Next Step</button></div></form>

表格 2

<form id="form-test-2">
  <p>
        <select name="channel_type" class="form-control" id="channel_type" size="1">
          <option value="1">Front Lit</option>
          <option value="2">Reverse Lit (Halo)</option>
          <option value="3">Front Lit &amp; Back Lit</option>
          <option value="4">Reverse Pan Exposed Neon</option>
          <option value="5">Open Face</option>
          <option value="6">Reverse Pan Exposed Neon &amp; Backlit</option>
        </select>
  </p>
<div class="acc-wizard-step"><button class="btn btn-primary" type="">Next Step</button></div></form>

---

....大约还有 10 个这样的 FORMS 作为向导中的步骤

最后一个步骤/表单有提交按钮，需要提交所有这些表单，就好像它们是 1 个大表单一样!

<form name="sentMessage" id="form-ContactInfo">
         <legend>Contact Information</legend>
     <div class="control-group">
                    <div class="controls">
      <input type="text" class="form-control" placeholder="Full Name" id="name" required="" data-validation-required-message="Please enter your name" aria-invalid="false">
        <p class="help-block"></p>
       </div>
           </div>
                <div class="control-group">
                  <div class="controls">
      <input type="email" class="form-control" placeholder="Email" id="email" required="" data-validation-required-message="Please enter your email" aria-invalid="false">
    <div class="help-block"></div></div>
      </div>
<div class="control-group">
                  <div class="controls">
      <input type="phone" class="form-control" placeholder="Phone" id="phone" required="" data-validation-required-message="Please enter your phone number" aria-invalid="false">
    <div class="help-block"></div></div>
      </div>

      <input type="hidden" id="returnDepth" name="returnDepth" value="0">
      <br>

      <button type="submit" class="btn btn-primary pull-right" id="submit-all">Submit Quote Request</button>
</form>

Answer 1

假设您可以更改 HTML:

在最后一个表单中添加一个隐藏字段:

<input type="hidden" id="form_values" name="form_values" value="">

然后使用 jQuery .submit()捕获表单提交的函数:

$('#form-ContactInfo').submit(function(event) {
  $('#form_values').val($('form').serialize());
});

然后您可以使用它来使用 parse_str() 获取值

parse_str($_POST['form_values'], $form_values);
// $form_values['channel_type'][0], etc

需要注意的是，您的许多字段都缺少 name 属性。您需要添加这些内容。

Fiddle demoing the JS portion.