Question

演示 - http://www.elated.com/res/File/articles/development/javascript/jquery/slick-ajax-contact-form-jquery-php/

我正在尝试在网站上实现上述形式＆＃34;〜给我们发送电子邮件〜＆＃34;特别是页面发送确认，无需刷新/路由主页面。

http://logohour.com/form.html这是我使用相同编码结构设计的表格。一切正常，但提交路由到php页面作为发送确认。我想要提交相同的页面确认信息，如我在提交后的DEMO上所示。

下面提到的是我的Ajax＆amp; PHP：

<?php

// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "advertaniaagency@gmail.com" );
define( "EMAIL_SUBJECT", "SiderBar Visitor Message" );

// Read the form values
$success = false;
$Name = isset( $_POST['Name'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['Name'] ) : "";
$Email = isset( $_POST['Email'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Email'] ) : "";
$Phone = isset( $_POST['Phone'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Phone'] ) : "";
$Country = isset( $_POST['Country'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Country'] ) : "";
$Select = isset( $_POST['Select'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Select'] ) : "";
$Message = isset( $_POST['Message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['Message'] ) : "";

// If all values exist, send the email
if ( $Name && $Email && $Phone && $Country && $Select && $Message ) {

    $msgToSend = "Name: $Name\n";
    $msgToSend .= "Email: $Email\n";
    $msgToSend .= "Phone: $Phone\n";
    $msgToSend .= "Sender Country: $Country\n";
    $msgToSend .= "Sender Select: $Select\n";
    $msgToSend .= "Message: $Message";

    $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
    $headers = "From: " . $Name . " <" . $Email . ">";
    $success= mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
  <p>Click your browser's Back button to return to the page.</p>
  </body>
</html>
<?php
}
?>

// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
// SIDEBAR FLOATiNG FORM SCRIPT ///////////////////////////////////////////////
var messageDDelay = 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 
  Form() the form 's submit handler.
  // Position the form so it sits in the centre of the browser window.

  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed
  $('a[href="#contact_form"]').click(function() {
    $('#content').fadeTo('slow', .2);
    $('#contact_form').fadeIn('slow', function() {
      $('#Name').focus();
    })
    return false;
  });
  // When the "Cancel" button is clicked, close the form
  $('#cancel').click(function() {
    $('#contact_form').fadeOut();
    $('#content').fadeTo('slow', 1);
  });
  // When the "Escape" key is pressed, close the form
  $('#contact_form').keydown(function(event) {
    if (event.which == 27) {
      $('#contact_form').fadeOut();
      $('#content').fadeTo('slow', 1);
    }
  });
}
// Submit the form via Ajax

function submitFForm() {
  var contact_form = $(this);
  // Are all the fields filled in?
  if (!$('#Name').val() || !$('#Email').val() || !$('#Phone').val() || !$('#Country').val() || !$('#Select').val() || !$('#Message').val()) {
    // No; display a warning message and return to the form
    $('#incompleteMMessage').fadeIn().delay(messageDDelay).fadeOut();
    contact_form.fadeOut().delay(messageDDelay).fadeIn();
  } else {
    // Yes; submit the form to the PHP script via Ajax
    $('#sendingMMessage').fadeIn();
    contact_form.fadeOut();
    $.ajax({
      url: contact_form.attr('action') + "?ajax=true",
      type: contact_form.attr('method'),
      data: contact_form.serialize(),
      success: submitFFinished
    });
  }
  // Prevent the default form submission occurring
  return false;
}
// Handle the Ajax response
function submitFFinished(response) {
  response = $.trim(response);
  $('#sendingMMessage').fadeOut();
  if (response == "success") {
    // Form submitted successfully:
    // 1. Display the success message
    // 2. Clear the form fields
    // 3. Fade the content back in
    $('#successMMessage').fadeIn().delay(messageDDelay).fadeOut();
    $('#Name').val("");
    $('#Email').val("");
    $('#Phone').val("");
    $('#Country').val("");
    $('#Selct').val("");
    $('#Message').val("");
    $('#content').delay(messageDDelay + 500).fadeTo('slow', 1);
  } else {
    // Form submission failed: Display the failure message,
    // then redisplay the form
    $('#failureMMessage').fadeIn().delay(messageDDelay).fadeOut();
    $('#contact_form').delay(messageDDelay + 500).fadeIn();
  }
}

Answer 1

当您声明＆＃34; 提交＆＃34;在表单内输入，表单始终发送。

在您的表单中，您必须使用：

<input type="button" id="sendMMessage" name="sendMMessage" value="Submit">

而不是：

<input type="submit" id="sendMMessage" name="sendMMessage" value="Submit">

提交后，Ajax Php表单不会停留在同一页面上

1 个答案: