Question

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

我正在使用一个使用Bootstrap的表单向导。它与之前曾在JavaScript和前端开发中使用过的任何内容都不同，因为它不是一个HTML表单，而是单个表单中的所有表单字段，而是分成单独的表单。

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

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

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

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

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

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

我对JavaScript的了解不足以确切地知道如何执行此操作，因为我以前从未见过它！ jQuery也可以在这个项目中使用。我很感激任何想法和帮助，使这个工作，并能够提交多个表格作为1表格与最后一个提交按钮。

表单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充当向导中的步骤

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

<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()函数来捕获表单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.

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

1 个答案: