使用Ajax从jQuery选项卡提交表单

Question

I am having problems submitting a form on the second tab, as the the page is reloading and submitting the first tab. I understand this can be solved using Ajax. I have read some other posts but haven't quite grasped it so any explanation would be great.

I would like the form to load a different page the same way 'action' works within a HTML form.

The code below shows part of the HTML and jQuery.

What Ajax and where would it need to be placed in order for the second and on going tabs to post the data inputted in the particular tab.

<div class="tabs">
    <ul class="tab-links" style= "margin-top: 50px; width:700px;">
        <li class="active"><a href="#tab1"><p>Advert Space</p></a></li>
        <li><a href="#tab2"><p>Vouchers</p></a></li>
        <li><a href="#tab3"><p>Business 2 Business</p></a></li>
        <li><a href="#tab4"><p>Search Space Ads</p></a></li>
    </ul>

    <div class="tab-content" >
        <div id="tab1" class="tab active">
            <h4 style="font-weight: 100">Display your advert</h4>
            <?php include ('advertinfo.php')?>
        </div>

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');


        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

Here is a copy of the form code

    <form action="advertupload.php" method= "post">
<dl>
<dd><input type="hidden" name="business" value="<?php echo ($_SESSION['myname']) ?>">
<input type="hidden" name="approval" value="N">
<input type="hidden"  name="id" value="<?php echo $_GET['id'];?>"/>
<dt><p>Which advert space would you like to use?</p>
<dd><select name="location" id="textfield">
  <option value="0">Header</option>
  <option value="1">Location 1</option>
  <option value="2">Location 2</option>
  <option value="3">Location 3</option>
  <option value="4">Location 4</option>
  <option value="5">Location 5</option>
  <option value="6">Location 6</option>
</select>
<dt><p>When would you like to start your advert?</p>
<dd><input type="date" name="startdate" id="textfield">
<dt><p>When would you like your advert to end?</p>
<dd><input type="date" name="enddate" id="textfield">
<dt><button type="submit" name="submit" class="btn" style="margin-top: 20px; margin-left: 40px;"><p style="margin-top:1px; color: #fff">Next</p></a></button></td>
</dl>

Answer 1

Here's an example of how you could submit the forms using AJAX: http://codepen.io/medinasod/pen/QyqMKZ

JS

  jQuery("document").ready(function() {

    jQuery(".tab1Form, .tab2Form, .tab3Form").submit(function() {
      event.preventDefault();
      var fields = jQuery("input", this).serializeArray();
      jQuery("#results").empty();
      jQuery.each(fields, function(i, field) {
        jQuery("#results").append(field.value + " ");
      });
      jQuery.ajax({
          method: "POST",
          url: "advertupload.php",
          data: fields
        })
        .done(function(msg) {
          console.log("Data Saved: " + msg);
          window.location.assign("/advertupload.php");
        });

    });

  });

HTML

<div class="container">
      <form class="tab1Form">
      <dl>
      <dd><input type="hidden" name="business" value="<?php echo ($_SESSION['myname']) ?>">
      <input type="hidden" name="approval" value="N">
      <input type="hidden"  name="id" value="<?php echo $_GET['id'];?>"/>
      <dt><p>Which advert space would you like to use?</p>
      <dd><select name="location" id="textfield">
        <option value="0">Header</option>
        <option value="1">Location 1</option>
        <option value="2">Location 2</option>
        <option value="3">Location 3</option>
        <option value="4">Location 4</option>
        <option value="5">Location 5</option>
        <option value="6">Location 6</option>
      </select>
      <dt><p>When would you like to start your advert?</p>
      <dd><input type="date" name="startdate" id="textfield">
      <dt><p>When would you like your advert to end?</p>
      <dd><input type="date" name="enddate" id="textfield">
      <dt><button type="submit" name="submit" class="btn" style="margin-top: 20px; margin-left: 40px;"><p style="margin-top:1px; color: #fff">Next</p></a></button><span id="results"></span></td>
      </dl>
      </div>

Reference: Sample code was taken from the jQuery AJAX API and the jQuery serializeArray() documentation .