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

Question

NOTICE I realize this is very unusual and not really the "right" way but it is how this Wizard plugin is setup and out Wizard is already built using this jQuery Plugin so I would like to figure out a way to submit the data to my PHP script now as 1 FORM POST

I am working on a Form Wizard that uses Bootstrap. It is different from anything I have ever worked with before in JavaScript and Frontend development for a FORM because instead of being 1 HTML FORM with all the form fields in a single form, it is broken into separate Forms.

The code for the jquery plugin for this Wizard is located here https://github.com/sathomas/acc-wizard

There is a live Demo to see the above Wizard in action here http://sathomas.me/acc-wizard/#prerequisites

Each Step in the Wizard is wrapped in it;s own <form> tags.

So in the last/final step of the Wizard, instead of a NEXT button, there is a Submit button.

Now obviously this only Submits the very last <form> that the Submit button/field is attached to.

I need to somehow make the Submit button submit all the Forms in the Wizard to a PHP script and have it POST as one single Array of items instead of each Form being separate.

I am not good enough with JavaScript to know exactly how to go about doing this as I have never seen it done before! jQuery is also available to use in this project. I would appreciate any ideas and help in getting this to work and being able to submit multiple forms as 1 form with the last submit button.

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

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>

---

....about 10 more of these FORMS that act as Steps in a Wizard

The last Step/Form has the Submit button which needs to submit all these Forms as if they were 1 single large form!

<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

Assuming you can change the HTML:

Add in a hidden field to the last form:

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

Then use the jQuery .submit() function to catch the form submit:

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

Which you can then use to get the values using parse_str()

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

One thing to note, a lot of your fields are missing the name attribute. You'll need to add those in.

Fiddle demoing the JS portion.