如何使用JavaScript将多个HTML表单作为一个表单提交到PHP脚本

How to submit multiple HTML Forms as One Form to a PHP script using JavaScript?

本文关键字：一个 表单提交 脚本 PHP JavaScript 何使用 HTML 表单      更新时间：2023-09-26

注意 我意识到这是非常不寻常的，并不是真正的"正确"的方式，但它是如何这个向导插件是设置和我们的向导已经建立使用这个jQuery插件，所以我想找出一种方法来提交数据到我的PHP脚本现在作为1 FORM POST

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

这个向导的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个以上的表单作为向导中的步骤

最后一步/表单有提交按钮，需要提交所有这些表单，如果他们是一个单一的大表单!

<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>

假设你可以改变HTML:

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

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

然后使用jQuery .submit()函数捕获表单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属性。你需要把它们添加到。

相关文章：