Question

我创建了一个联系表单，并使用Ajax在其中添加了一些事件，但是当我提交表单时，它说

XHR finished loading: "localhost/mysite/contact-us".
XHR finished loading: "localhost/mysite/contact-us".
XHR finished loading: "localhost/mysite/contact-us".
XHR finished loading: "localhost/mysite/contact-us".

我不知道为什么会这样做但是这里是我的Ajax代码 [编辑后更新]

$("#success-alert").hide();
    $("#error-alert").hide();
    $('button').click(function(){
    $('input').each(function() {
    if(!$(this).val()){
       $("#error-alert").show();
       $("#success-alert").hide();
       return false;
}
else
{
$('document').ready(function() {
var form = $('#contact_us'); // contact form
var submit = $('button');  // submit button
var status = $('#form-status'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit

$.ajax({
  url: '/contact-us', // form action url
  type: 'POST', // form submit method get/post
  dataType: 'html', // request type html/json/xml
  data: form.serialize(), // serialize form data 
  beforeSend: function() {
    submit.html('Sending....'); // change submit button text
  },
  success: function(data) {
    form.trigger('reset'); // reset form
    $("#success-alert").show();
    $("#error-alert").hide();
    submit.html('Send'); // reset submit button text

  },
  error: function(e) {
    console.log(e)
  }

});
});
});
}
});
});

HTML

<h3>Contact Us</h3>
  <form method="POST" action="/contact-us"class="static-contact-us styled" data-abide id="contact_us">
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">First Name</label>
      </div>
      <div class="large-9 columns">
        <input type="text" name="first_name" required>
        <small class="error">First name is required</small>
      </div>
    </div>
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">Last Name</label>
      </div>
      <div class="large-9 columns">
        <input type="text" name="last_name" required>
        <small class="error">Last name is required</small>
      </div>
    </div>
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">Phone Number</label>
      </div>
      <div class="large-9 columns">
        <input type="text" name="phone" required>
        <small class="error">Phone number is required</small>
      </div>
    </div>
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">E-Mail</label>
      </div>
      <div class="large-9 columns">
        <input type="text" name="email" required>
        <small class="error">E-Mail is required</small>
      </div>
    </div>
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">Subject</label>
      </div>
      <div class="large-9 columns">
        <input type="text" name="subject">
      </div>
    </div>
    <div class="row input-row">
      <div class="large-3 columns">
        <label class="inline">Question</label>
      </div>
      <div class="large-9 columns">
        <textarea name="question"></textarea>
      </div>
    </div>
    <div class="row">
      <div class="large-3 columns">&nbsp;</div>
      <div class="large-9 columns">
        <button type="submit">Send</button>
      </div>
    </div>
  </form>
  <div id="form-status">
  <div id="success-alert" data-alert class="alert-box success radius">
  Thanks for contacting us!
</div>
  <div id="error-alert" data-alert class="alert-box alert radius">
        An error occurred. Try again later.
</div>

  <div id="form-status"></div>

注意：HTML似乎很好，但我现在也添加了完整的Ajax。由于条件如何，这可能是问题。

Answer 1

JSFiddle Working Solution

您似乎反复提交，因为您在提交事件本身内触发了提交事件。

尝试下面的解决方案，发布在JSFiddle上。

它从按钮事件中删除表单提交事件，并且只提交一次。

它仍然给出了预期的404错误（因为动作url不在jsfiddle服务器上），这导致它不重置表单，但这只是因为它在jsFiddle上运行。在您的服务器上，表单将正确重置，因为将触发成功事件。

$("#success-alert").hide();
$("#error-alert").hide();


jQuery(document).ready(function() {



$('button').click(function(btn,e) {
    $('input').each(function() {
        if (!$(this).val()) {
            $("#error-alert").show();
            $("#success-alert").hide();
            return false;
        }
        else
        {

                var form = $('#contact_us'); // contact form
                var submit = $('button');  // submit button
                var status = $('#form-status'); // alert div for show alert message


                    $.ajax({
                        url: '/contact-us', // form action url
                        type: 'POST', // form submit method get/post
                        dataType: 'html', // request type html/json/xml
                        data: form.serialize(), // serialize form data 
                        beforeSend: function() {
                            submit.html('Sending....'); // change submit button text
                        },
                        success: function(data) {
                            form.trigger('reset'); // reset form
                            $("#success-alert").show();
                            $("#error-alert").hide();
                            submit.html('Send'); // reset submit button text

                        },
                        error: function(e) {
                            console.log(e)
                        }

                    });
     return false;
        }

    });
});

// form submit event
$('form').on('submit', function(e) {
    // form submit event
                    e.preventDefault(); // prevent default form submit


    });


});

Answer 2

决定是否要使用此解决方案发送数据：

<form method="POST" action="/contact-us">
   (...)  
   <button type="submit">Send</button>
</form>

或

<form id="form">
   (...)  
   <button type="submit">Send</button>
</form>

$("form").submit(function() {
   $.ajax({
      url: '/contact-us', 
      type: 'POST', 
      data: form.serialize(),
      beforeSend: function(),
         (...)
      });
});

多次使用Ajax发送表单的HTML表单

2 个答案: