Question

以下是我的联系表格，我想要汇总消息

<div class="contact-formular">
                <div class="message"></div>
                <form method="post" action="contact.php" name="contactForm" class="contactform" id="contactForm"  >
                    <div class="one_half element_from_left">
                        <input id="senderName" name="senderName" type="text" class="name required" size="30" value="Name" title="Name" />
                        <input id="senderEmail" name="senderEmail" type="text" class="email required" size="30" value="Email" title="Email" />
                        <input id="senderPhone" name="senderPhone" type="text" class="phone required" size="30" value="Phone" title="Phone" />
                    </div>
                    <div class="one_half last element_from_right">
                        <textarea id="message" name="message" cols="40" rows="4" class="comments" title="Message">Message</textarea>
                    </div>
                    <input id="sendMessage" name="send-btn" type="submit" class="send_message submit" value="Send message" />
                </form>

                    <div id="sendingMessage" class="statusMessage">
                        <p>Sending your message. Please wait...</p>
                    </div>
                    <div id="successMessage" class="statusMessage">
                        <p>Thanks for sending your message! We'll get back to you shortly.</p>
                    </div>
                    <div id="failureMessage" class="statusMessage">
                    <p>There was a problem sending your message. Please try again.</p>
                    </div>
                    <div id="incompleteMessage" class="statusMessage">
                    <p>Please complete all the fields in the form before sending.</p>
                    </div>
            </div>

我正在使用以下javascript进行ajaxing

<script  type="text/javascript">

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() {

  // Hide the form initially.
  // Make submitForm() the form \'s submit handler.
  // Position the form so it sits in the centre of the browser window.
  $('#contactForm').submit( submitForm ).addClass( 'positioned' );

 }




// Submit the form via Ajax

function submitForm() {
  var contactForm = $(this);

  // Are all the fields filled in?

  if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').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( "" );
    $('#senderPhone').val("");
    $('#message').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();
  }
}
</script>

但在点击提交按钮后，它会被“发送你的消息。请稍等......”

请帮我解决错误

Answer 1

从

更改您的代码

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

到此 -

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

提交联系表格不起作用

1 个答案: