提交表单后显示成功消息

Question

I would like to display a success message on the same page, instead of redirecting the user to the .php file. 我想在同一页面上显示成功消息，而不是将用户重定向到.php文件。

I would prefer not to over complicate by using AJAX & jQuery and I would like to keep the PHP file seperate from my form's HTML file. 我不希望使用AJAX和jQuery过于复杂，并且希望将PHP文件与表单的HTML文件分开。

Is it possible to use a small amount of Javascript for this? 为此可以使用少量的Javascript吗？

Here is my code; 这是我的代码；

HTML Form HTML表格

<div id="viewing-container">
    <div id="viewing-header">
        <h3 class="form-header">Request a Viewing</h3><button type="button" id="close" class="button-primary close-form" onclick="openClose()">&#735;</button>
    </div>
    <div id="viewing-content">
        <div id="success">
            <p class="form">Thank you for contacting us. We will be in touch soon.</p>
        </div>
        <p class="form">Please text or call Alex on <a href="">0123456789</a> for fastest response or enter your contact details below and we will call you back as soon as we can.</p>
        <form action="" method="post" autocomplete="on">
            <label for="name">Name <i>&#42;</i></label><input type="text" name="name" autofocus required><br />
            <label for="number">Contact Number <i>&#42;</i></label><input type="tel" name="number" required><br />
            <label for="message">Message <i>&#42;</i></label><textarea type="textarea" name="message" rows="5" required>Please call me to arrange a viewing of one of your properties.</textarea><br />
            <div class="g-recaptcha" data-sitekey="###"></div>
                    <br />
            <button type="submit" name="contactSubmit" id="contactSubmit" class="button-primary">Send</button>
        </form>
    </div>

PHP submit code PHP提交代码

$name = $number = $message = "";

if(isset($_POST['contactSubmit'])){
    $name = $_POST["name"];
    $number = $_POST["number"];
    $message = $_POST["message"];


    $msg = "Name: " . $name . "\n" . "Number: " . $number "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);

    $subject = "Viewing Request";

    mail("me@mysite.co.uk", $subject, $msg)
    header("Location: /index.htm");
}

exit;

I have tried using an onclick() Javascript function to display the success , but the form redirects to the PHP file before the Javascript function can be displayed. 我尝试使用onclick（）Javascript函数显示成功，但是在可以显示Javascript函数之前，表单将重定向到PHP文件。 The only thing I have been able to get to work is a javascript alert function, but this is not very attractive or user friendly. 我唯一能够上班的是javascript警报功能，但这不是很吸引人或用户友好。 I would like to display the success message and run the external php file without reloading the HTML page. 我想显示成功消息并运行外部php文件，而无需重新加载HTML页面。

Please help!! 请帮忙！！ I'm not extremely proficient in PHP or Javascript :( Thanks in advance. 我不是非常精通PHP或Javascript :(预先感谢。

Answer 1

<?php
$nameErr = $numberErr = $messageErr = "";
$name = $number = $message = "";
if(isset($_POST['contactSubmit'])){
$name = $_POST["name"];
$number = $_POST["number"];
$message = $_POST["message"];
$msg = "Name:" . $name . "\n" . "Number: " . $number. "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);
$subject = "Viewing Request";
mail("me@mysite.co.uk", $subject, $msg)?>
<script>alert("your message is sent successfully");
 window.location="index.html";
</script>
<?php  } ?>

after submitting form you will get a alert with message your message is sent successfully and if you click ok then you will redirect to index.html . 提交表单后，您将收到一条alert ，提示您message已成功发送，如果单击“确定”，则将redirect到index.html 。 Also please used javascript window.location beacuse header will give error of already sent 还请使用javascript window.location因为header将给出已发送的错误

Answer 2

You can accomplish this by using an AJAX call and jQuery is your best friend here. 您可以使用AJAX调用来完成此任务，而jQuery是您最好的朋友。

jQuery will save you to write a lot of lines of code, its very simple to use, simply add the cdn hosted link to your HTML <head> : jQuery将节省您编写很多代码行，其使用非常简单，只需将cdn托管链接添加到您的HTML <head> ：

form.html form.html

 <html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head>

Add this JS script after your form in the html file. 在html文件中的表单之后添加此JS脚本。
(you can also use a separate file "script.js" and add it to the head after the jquery link, but we will avoid overcomplicating it.) （您也可以使用单独的文件“ script.js”，并将其添加到jquery链接之后的头部，但是我们会避免使其过于复杂。）

 <div id="viewing-container"> <!-- your form --> </div> <script> $(document).ready(function() { // hide the success message $('#success').hide(); // process the form $('form').submit(function(event) { // get the form data before sending via ajax var formData = { 'name' : $('input[name=name]').val(), 'number' : $('input[name=number]').val(), 'message' : $('input[name=message]').val(), 'contactSubmit' : 1 }; // send the form to your PHP file (using ajax, no page reload!!) $.ajax({ type: 'POST', url: 'file.php', // <<<< ------- complete with your php filename (watch paths!) data: formData, // the form data dataType: 'json', // how data will be returned from php encode: true }) // JS (jQuery) will do the ajax job and we "will wait that promise be DONE" // only after that, we´ll continue .done(function(data) { if(data.success === true) { // show the message!!! $('#success').show(); } else{ // ups, something went wrong ... alert('Ups!, this is embarrasing, try again please!'); } }); // this is a trick, to avoid the form submit as normal behaviour event.preventDefault(); }); }); </script>

finally, change the last 2 lines of your php file: 最后，更改您的php文件的最后2行：

 <?php // .... your code .... //mail("me@mysite.co.uk", $subject, $msg) //header("Location: /index.htm"); if(mail("me@mysite.co.uk", $subject, $msg)) { $data['success'] = true; } else{ $data['success'] = false; } // convert the $data to json and echo it // so jQuery can grab it and understand what happend echo json_encode($data); ?>

提交表单后显示成功消息

问题描述

2 个解决方案

解决方案1
1 2016-06-10 10:01:46

解决方案2
1 2016-06-12 04:41:53

提交表单后显示成功消息

问题描述

2 个解决方案

解决方案1 1 2016-06-10 10:01:46

解决方案2 1 2016-06-12 04:41:53

解决方案1
1 2016-06-10 10:01:46

解决方案2
1 2016-06-12 04:41:53