javascript - AJAX 上的表单提交延迟

Question

你能帮我解决这个问题吗？我有一个内置于 Foundation 遵守功能的表单。我用它实现了一个ajax。问题是我需要双击提交才能触发我的 ajax 提交。这是我的代码：

 $('#mywebsite-contact-form').submit(function(e) {

    e.preventDefault(); //prevent submission

    var formname      = $(this).attr('name');
    var resource_id   = $('#mywebsite-contact-form input[name=parent_resource_id]').val();
    var fullname      = $('#mywebsite-contact-form #form_properties_attributes_name').val();
    var organisation  = $('#mywebsite-contact-form #form_properties_attributes_organisation').val();
    var phone         = $('#mywebsite-contact-form #form_properties_attributes_phone').val();
    var postcode      = $('#mywebsite-contact-form #form_properties_attributes_postcode').val();
    var email         = $('#mywebsite-contact-form #form_properties_attributes_email').val();
    var enquiry       = $('#mywebsite-contact-form #form_properties_attributes_enquiry').val();
    var referrer      = $('#mywebsite-contact-form #form_properties_attributes_referrer').val();
    var message       = $('#mywebsite-contact-form #form_properties_attributes_message').val();

    var headers = {
      'X-Requested-With': 'XMLHttpRequest',
      'X-CSRF-Token': $('[name="authenticity_token"]', this).val(),
      'Accept': "application/json",
      'Content-Type': 'application/json'
    }

    // form data
    var data = {
      "form_configuration_name": formname,
      "parent_resource_id": resource_id,
      "form": {
        "properties_attributes": {
          "name"          : fullname,
          "organisation"  : organisation,
          "phone"         : phone,
          "post_code"     : postcode,
          "email"         : email,
          "query"         : enquiry,
          "referer"       : referrer,
          "message"       : message
        }
      }
    }
    // AJAX validation & form submission 
    $("#mywebsite-contact-form").on("formvalid.zf.abide", function(ev,frm) {
      if(captcha()) { // if captcha succeed
        $.ajax({
          headers: headers,
          method: "POST",   
          dataType: 'json',
          data: JSON.stringify(data),     
          url: '/api/customizations',
          beforeSend: function() {
            $('#submit-contact-btn').attr('value','Loading...');
          },
          success: function(data) {
            $('#contact-success').foundation('open');
            $('#mywebsite-contact-form').trigger("reset");
            grecaptcha.reset();
            $('#error-captcha').text('');

            $('#submit-contact-btn').attr('value','SUBMIT');

            return true;
          },
          error: function(error){
            alert('Error Occured!');
            console.log('error send: ', error);
            $('#submit-contact-btn').attr('value','SUBMIT');
            return false;
          }
        });
      } 
    }); // end of form validation

  });

  $('.confirm_button').on('click', function(e) {
    e.preventDefault();
    $('#contact-success').foundation('close');
    //location.reload();
  });

});

function captcha() {
  var v = grecaptcha.getResponse();

  console.log('captcha resp: ', v);
  console.log('captcha resp: ', v.length);

  if(v.length == 0) {
    document.getElementById('contact-captcha').value = "";
    $('#error-captcha').css({'display':'block'});
    return false;
  }

  if(v.length != 0){
    document.getElementById('contact-captcha').value = "1";
    return true; 
  } 

}

第一次点击提交只显示我的控制台。表格未提交。Next 如果我再次点击提交，它将立即提交。

标签： javascriptajaxformszurb-foundation