Question

我设计了一个带有PhP / Ajax的补充工具栏浮动表格。这是链接：http://logohour.com/form.html 一切都很好但是当访问者填写并提交表格时，它会路由到另一页进行确认。

我使用几乎相同的可点击形式的编码及其工作正常但是在这个侧边栏浮动形式我错误的地方可能是在Ajax或PHP。

您可以在Page Source中找到Ajax，这是我的PHP：

<?php

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

// Read the form values
$ssuccess = 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 . ">";
    $ssuccess = mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $ssuccess ? "ssuccess" : "error";
} else {
?>
<html>
  <head>
    <title>Thanks!</title>
  </head>
  <body>
  <?php if ( $ssuccess ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
  <?php if ( !$ssuccess ) 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
}
?>

这是AJAX源代码

    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 submitForm() 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(),
          ssuccess: submitFFinished        });      }
      // Prevent the default form submission occurring
      return false;    }
    // Handle the Ajax response
    function submitFFinished(response) {
      response = $.trim(response);
      $('#sendingMMessage').fadeOut();
      if (response == "ssuccess") {
        // Form submitted ssuccessfully:
        // 1. Display the ssuccess 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

使用你的功能：

$("#contact_form").submit(submitFForm);

Answer 2

您没有调用submitFForm（）函数。尝试将click事件设置为提交按钮或将“submit”事件设置为表单，例如：

$("#contact_form").submit(function(e) {
submitFForm();
    e.preventDefault(); // avoid to execute the actual submit of the form.
});

Answer 3

我不确定我是否理解正确，但我认为您说这段代码无法正常运行：

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

是吗？如果是这样，请尝试将其替换为：

$('#sendMMessage').click(function(event) {
    event.preventDefault();
    $('#content').fadeTo('slow', .2);
    $('#contact_form').fadeIn('slow', function() {
      $('#Name').focus();
    });
    alert('successfully stopped the other page loading');
    return false;
 });

同时使用event.preventDefault()和return false是停止预期重定向的正确方法。您的jQuery选择器也需要更正。

Answer 4

$('#sendMMessage').click(function(e){
e.preventDefault();

.... ajax ...etc

})

您必须取消默认的提交行为。

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

4 个答案: