提交表單后顯示成功消息
[英]Display success message upon form submit
問題描述
我想在同一頁面上顯示成功消息，而不是將用戶重定向到.php文件。
我不希望使用AJAX和jQuery過於復雜，並且希望將PHP文件與表單的HTML文件分開。
為此可以使用少量的Javascript嗎？
這是我的代碼；
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()">˟</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>*</i></label><input type="text" name="name" autofocus required><br />
<label for="number">Contact Number <i>*</i></label><input type="tel" name="number" required><br />
<label for="message">Message <i>*</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提交代碼
$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;
我嘗試使用onclick（）Javascript函數顯示成功，但是在可以顯示Javascript函數之前，表單將重定向到PHP文件。 我唯一能夠上班的是javascript警報功能，但這不是很吸引人或用戶友好。 我想顯示成功消息並運行外部php文件，而無需重新加載HTML頁面。
請幫忙！！ 我不是非常精通PHP或Javascript :(預先感謝。
2 個解決方案
解決方案1
1 2016-06-10 10:01:46
<?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 } ?>
提交表單后，您將收到一條alert ，提示您message已成功發送，如果單擊“確定”，則將redirect到index.html 。 還請使用javascript window.location因為header將給出已發送的錯誤
解決方案2
1 2016-06-12 04:41:53
您可以使用AJAX調用來完成此任務，而jQuery是您最好的朋友。
jQuery將節省您編寫很多代碼行，其使用非常簡單，只需將cdn托管鏈接添加到您的HTML <head> ：
form.html
<html> <head> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head>在html文件中的表單之后添加此JS腳本。
（您也可以使用單獨的文件“ 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>最后，更改您的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); ?>
提交表單模式后顯示成功消息
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.