如何在html中提交表单后显示成功对话框?

时间:2017-11-20 09:00:18

标签: php html

我是php和html的新手,我已创建了一个表单,该表单将接受来自用户的输入并将其发送到指定的电子邮件ID。一切正常,但在提交表单时,它会转到另一个新页面。 如何在提交表单时将对话框替换为确认消息?

HTML -

<form method="POST" name="contactform" action="contact-form-handler.php"> 
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit"><br>
</form>

PHP -

<?php 
$errors = '';
$myemail = 'mymail@gmail.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 : $message"; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    echo "Your Message successfully sent, we will get back to you ASAP.";
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Contact form handler</title>
</head>

<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>


</body>
</html>

2 个答案:

答案 0 :(得分:0)

可以使用以下jQuery函数完成:

$(document).ready(function() {
    $("[name='contactForm']").submit(function() {
        if(confirm("You are about to submit the form. Are you sure?")){
            window.location = "http://www.google.com/"
        };
    });
});

但无论如何,您将被重定向到空白的新页面。为了防止您可以使用AJAX提交(只需在函数内添加AJAX构造)或使用JavaScript函数重定向我添加到jQuery脚本

答案 1 :(得分:0)

您可以在同一页面中提交表单,只需向用户显示JavaScript alert消息即可。

以下代码可帮助您解决问题。

<?php 
if(isset($_POST['btnSubmit'])){
$errors = '';
$myemail = 'mymail@gmail.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 : $message"; 

    $headers = "From: $myemail\n"; 
    $headers .= "Reply-To: $email_address";

    mail($to,$email_subject,$email_body,$headers);
    //redirect to the 'thank you' page
    //echo "Your Message successfully sent, we will get back to you ASAP.";
} 
print("<script>alert('Your Message successfully sent, we will get back to 
you ASAP.');</script>");
}

?>

<form method="POST" name="contactform" action=""> 
<p>
<label for='name'>Your Name:</label> <br>
<input type="text" name="name">
</p>
<p>
<label for='email'>Email Address:</label> <br>
<input type="text" name="email"> <br>
</p>
<p>
<label for='message'>Message:</label> <br>
<textarea name="message"></textarea>
</p>
<input type="submit" value="Submit" name="btnSubmit"><br>
</form>

希望它有所帮助!