Question

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

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

下面的代码显示了HTML和jQuery的一部分。

什么是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();
    });
});

以下是表单代码的副本

    <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

以下是如何使用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>

参考：示例代码来自jQuery AJAX API和jQuery serializeArray() documentation。

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

1 个答案: