提交表单后如何留在页面上答案

【问题标题】：How to stay on page after submission of form提交表单后如何留在页面上
【发布时间】：2017-06-13 15:41:47
【问题描述】：

我已经寻找了几天来尝试找到我的具体问题的答案，但我无法这样做。请帮忙。

我的网站上有一个表格，一旦点击，就会发送一封电子邮件。我想在保持在同一页面上并将 div 从表单更改为图像的同时执行此操作。

这是我设法从互联网上收集的代码。

请尽可能以巴尼风格提供建议。
提前感谢任何可以提供帮助的人。

jQuery(document).ready(function(){

    jQuery('.contact').submit( function() {

$.ajax({
      type: "POST",
      url: "contact-form-handler.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
        .append("<p>We will be in touch soon.</p>")
        .hide();
        });
      }
    });
        return false;

});

<form method="post" action="" name="contact" id="contact" class="w3-container w3-light-grey w3-margin">

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" required name="name" id="name" type="text" placeholder="Name">

    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" required name="email" id="email" type="text" placeholder="Email">

    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <input id="message" class="w3-input w3-border" required name="message" type="text" placeholder="Message">

    </div>
  </div>

  <p class="w3-center">
    <input type="submit" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />
  </p>


</form>

<?php
$errors = '';
$myemail = 'jerry@sitesbyjc.com';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
    $errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
	$to = $myemail; 
	$email_subject = "Contact form submission: $name";
	$email_body = "You have received a new message. ".
	" Here are the details:\n Name: $name \n Email: $email_address \n Message: \n $message"; 
	
	$headers = "From: $myemail\n"; 
	$headers .= "Reply-To: $email_address";
	
	mail($to,$email_subject,$email_body,$headers);
   
    
} 
?>

【问题讨论】：

也许event.preventDefault() 可以帮助你？ api.jquery.com/event.preventdefault
请不要使用午安之类的。因为在这里，来自不同时区的人都在场，对我来说，现在是午夜 1:17
@SagarV 同意。在我的时区，现在快晚上 11 点了
在 onsubmit 事件上调用 return false 应该可以解决问题，但我从未尝试使用 jQuery。

标签： javascript php html ajax forms

【解决方案1】：

<form> 将其作为默认行为，将用户重定向到提交时的 URL。取自 action 属性的 URL。

为了防止这种重定向，您必须告诉浏览器：“不要重定向”。

简短： e.preventDefault()

Long：在提交回调中，您的函数接受一个参数。只需将其命名为：e。这是一个对象，它有一个函数preventDefault。此功能可防止默认行为：重定向。在回调函数的第一行执行此调用。

【讨论】：

【解决方案2】：

如果我理解您的问题，您需要在调用 AJAX 时使用preventDefault() 以防止提交（默认情况下），因此您可以执行以下操作：

jQuery(document).ready(function(){
    jQuery('.contact').submit( function($e) {

        $e.preventDefault();
        $.ajax({
            type: "POST",
            url: "contact-form-handler.php",
            data: dataString,
            success: function() {
                $('#contact_form').html("<div id='message'></div>");
                $('#message').html("<img src='thankyou.jpg' style='width:100%'/>")
                .append("<p>We will be in touch soon.</p>")
                .hide();
            });
        }
    });
    return false;

});

在 MDN 上了解有关 preventDefault() 以及 defaultPrevented 的更多信息。

【讨论】：

【解决方案3】：

好吧，您可以将事件处理程序附加到您的提交按钮并将提交按钮更改为一个简单的按钮，这样它就不会在单击时提交表单。按钮代码可以改成：

<input type="button" name="submit" class="button w3-section w3-black w3-ripple" id="submit_btn" value="Send" />

事件处理代码可以改成：

jQuery('#submit_btn').submit( function() {

};

【讨论】：