Question

我设计了一个带有PhP / Ajax的补充工具栏浮动表格，它正在工作并将提交内容发送到我的目标电子邮件。这是链接：http://logohour.com/form.html但是当访问者填写并成功提交表单时，它会将他转到另一页进行确认。

这应该不是这样的，必须按照我的编码用弹出消息贴在主页上：

<?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＆amp; PHP供参考：

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();      }    }

done()

Answer 1

首先，您必须避免此表单的正常表单提交，您可以使用普通按钮而不是提交按钮来完成此操作。

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

执行一个javascript ajax提交代码，点击sendMMessage id。这将解决你的问题。

更新回答：

$( "#target" ).click(function() {
   // put your ajax form submit code here
  $.ajax({
           type: "POST",
           url: 'http://logohour.com/sidebar-form.php',
           data: $("#contact_form").serialize(), // serializes the form's elements.
           success: function(data)
           {
               console.log(data); // show response from the php script.
           }
         });
});

如果您仍然不清楚这一点，我会向您解释更多细节。

感谢。

Answer 2

简单的ajax表单提交下面。希望它能满足您的需求。

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(function () {
    $('form#consultationForm').on('submit', function(e) {
        $.ajax({
            type: 'post',
            url: 'receivedConfirmation.php',
            data: $(this).serialize(),
            success: function (result) {
                console.log(result);
                $('#receivedStatus').attr('style','display:block');
                $('#receivedStatus').html(result);
            }
        });
        e.preventDefault();
    });
});     
</script>
<form id="consultationForm" method="post">
    Firstname: <input name="fname" />
    Lastname: <input name="lname" />
    <div style='clear:both;'></div>
    <input type="submit" name="submit" value="save"/>
    <input type="reset" name="cancel" value="cancel"/>
</form>
<div id='receivedStatus' style='display:none;'></div>

<强> receivedConfirmation.php

<?php
 echo "<PRE>";
 print_r($_POST);
 echo "</PRE><br>";

 //do your DB stuffs here and finally echo your response based on success or failure

 echo "Thanks for sending your message! We'll get back to you shortly.";
 echo "<br>Click your browser's Back button to return to the page."
?>

PHP / Ajax表单Sumission

2 个答案: