Question

我正在开发一个假设将数据发送到php，一切运行良好但似乎浏览器完全无视event.preventDefault();

    var messageDelay = 2000;  // How long to display status messages (in milliseconds)

// Init the form once the document is ready
$( init );


// Initialize the form

function init() {


  // Make submitForm() the form's submit handler.
  $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );

  $('a[href="#contactForm"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#contactForm').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )

    return false;
  } );

}


// Submit the form via Ajax

function submitForm() {
  var contactForm = $(this);
event.preventDefault();//cancel postback
  // Are all the fields filled in?

  if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#job_title').val() || !$('#company').val() !$('#phone').val()) {

    // No; display a warning message and return to the form
    $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
    contactForm.fadeOut().delay(messageDelay).fadeIn();

  } else {

    // Yes; submit the form to the PHP script via Ajax

    $('#sendingMessage').fadeIn();
    contactForm.fadeOut();

    $.ajax( {
      url: contactForm.attr( 'action' ) + "?ajax=true",
      type: contactForm.attr( 'method' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );
  }

  // Prevent the default form submission occurring
  return false;
}


// Handle the Ajax response

function submitFinished( response ) {
  response = $.trim( response );
  $('#sendingMessage').fadeOut();

  if ( response == "success" ) {

    // Form submitted successfully:
    // 1. Display the success message
    // 2. Clear the form fields
    // 3. Fade the content back in

    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#senderName').val( "" );
    $('#senderEmail').val( "" );
    $('#job_title').val( "" )
    $('#company').val( "" )
    $('#phone').val( "" )

    $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );

  } else {

    // Form submission failed: Display the failure message,
    // then redisplay the form
    $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#contactForm').delay(messageDelay+500).fadeIn();
  }
}

<div class="form-group"><input class="form-control" type="text" name="senderName" id="senderName" placeholder="Please type your Full Name" required="required" maxlength="40" /></div>
<div class="form-group"><input  class="form-control"type="text" name="company" id="company" placeholder="Please type your Company Name" required="required" maxlength="50" /></div>
<div class="form-group"><input class="form-control" type="text" name="job_title" id="job_title" placeholder="Please type your Job Title" required="required" maxlength="80" /></div>
<div class="form-group"><input class="form-control" type="email" name="senderEmail" id="senderEmail" placeholder="Please type your Email Address" required="required" maxlength="50" /></div>
<div class="form-group"><input  class="form-control" type="text" name="phone" id="phone" placeholder="Please type your Phone Number" required="required" maxlength="50" /></div>

PS：在上面的例子中我试图使用onclick函数来调用submitForm，没有运气:(

Answer 1

您不必在函数定义中定义事件参数。试试这个：

function submitForm(event) { // note the 'event' parameter
    var contactForm = $(this);
    event.preventDefault();
    // the rest of your code...
}

Answer 2

因为您没有定义event

function submitForm() {

需要

function submitForm (event) {

无法阻止默认提交表单

2 个答案: