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

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.

我在第二个选项卡上提交表单时遇到问题,因为页面正在重新加载并提交第一个选项卡。我知道这可以使用Ajax解决。我已经阅读了其他一些帖子,但还没有完全掌握,所以任何解释都会很棒。

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

我希望表单以与HTML表单中“action”相同的方式加载不同的页面。

The code below shows part of the HTML and jQuery.

下面的代码显示了HTML和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.

什么是Ajax以及它需要放在哪里以便第二个和后续标签发布在特定选项卡中输入的数据。

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

1 个解决方案

#1

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

以下是如何使用AJAX提交表单的示例:http://codepen.io/medinasod/pen/QyqMKZ

  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.

参考:示例代码取自jQuery AJAX API和jQuery serializeArray()文档。

#1