修复联系表格 - 消息发送成功
Fix contact form - Messages sent successfully
我在 HTML 中有一个登录页面，其中涉及通过联系表发送数据。但是，如果您尝试使用联系表，当您单击 'Submit' 按钮时，您会打开一个新的 PHP 页面 'Success'。当我单击 'Submit' 时没有打开页面，但文本出现在 'Send' 按钮下方时，我该怎么做，文本为 'Messages sent successfully'?
我无法解决这个问题。我应该在 HTML 和 PHP 中更改什么？
这是我想做的事的示例图片：
HTML 代码：
<!-- Form -->
<form class="contact-form" role="form" method="post" action="php/form-process.php">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Nome" required="required">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
<textarea class="form-control" name="message" placeholder="Messaggio" rows="4" required="required"></textarea>
<input type="checkbox" name="trattdati" required /> Accetto il trattamento dei miei dati ai sensi del D.Lgs. 196/03<br />
<input type="checkbox" name="provasoftware" /> Desidero provare il software
<br /><br />
<button type="submit" id="submit" class="btn btn-lg btn-primary"
style="float:left">Invia</button>
<div id="success" class="success" style=" color: #009688;
font-size: 20px;
margin-top: -16px;
float: left;
margin-left: 25px;">
</div>
</form>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
var options = {
target: '#success', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// pre-submit callback
function showRequest(formData, jqForm, options) {
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
$('.contact-form')[0].reset();
$('.contact-form').trigger("reset");
}
// bind form using 'ajaxForm'
$('.contact-form').ajaxForm(options);
});
</script>
PHP 文件：
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
//if (empty($_POST["msg_subject"])) {
// $errorMSG .= "Subject is required ";
//} else {
// $msg_subject = $_POST["msg_subject"];
//}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "bagiacchimarco7@gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
//$Body .= "Subject: ";
//$Body .= $msg_subject;
//$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
如果单击提交按钮并填写所有内容然后重定向到 success_page.php，您可以使用只需添加 name="submit" 它应该可以工作 HTML:
更新 2： 工作示例 --->> sample website（不要介意这些错误，它只是一个简单的示例，您可以自己尝试一下。我补充说将 php 放入 html 文件中，它起作用了。希望这对你有帮助。
更新： 如果您 include 您在 div 中的 php 页面，您希望它应该打印出消息。
<form class="contact-form" role="form" method="post" action="">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Nome" required="required">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
<textarea class="form-control" name="message" placeholder="Messaggio" rows="4" required="required"></textarea>
<input type="checkbox" name="trattdati" required /> Accetto il trattamento dei miei dati ai sensi del D.Lgs. 196/03<br />
<input type="checkbox" name="provasoftware" /> Desidero provare il software
<br /><br />
<button type="submit" id="submit" class="btn btn-lg btn-primary" style="float:left">Invia</button>
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
//if (empty($_POST["msg_subject"])) {
// $errorMSG .= "Subject is required ";
//} else {
// $msg_subject = $_POST["msg_subject"];
//}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "bagiacchimarco7@gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
//$Body .= "Subject: ";
//$Body .= $msg_subject;
//$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success message sent!";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
<div id="success" class="success" style=" color: #009688;
font-size: 20px;
margin-top: -16px;
float: left;
margin-left: 25px;">
</div>
</form>
您需要通过 AJAX 向您的 PHP 文件发送 POST 请求，并在 DOM.
上处理响应
jQuery/AJAX代码
$('#submit').click(function(e)
e.preventDefault() //Prevent the default action of the form.
$.post( //Send a POST request to the PHP file via AJAX
"path/to/file.php", //Path to the PHP file where you want to send the POST
$(.contact-form).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {}) // This takes all the form fields and returns key-value pairs of form data
, function (data) { //data = response from the PHP file. In your case "Sucess"
if(data==="success"){
//do something with data. Have assumed you want to append it to a div called "response". You will need to add <div id="response"> </div> below your form
$('#response').html(data);
} else {
$('#response').html("Sorry Try Again");
}
//Alternatively you can just append data to response and not have this IF
});
)
也请查看 validate.js。它在前端本身处理表单验证，还有一个非常好的方法来提交表单和管理响应。
假设您根据所使用的任何插件的文档正确使用 Javascript，您应该能够简单地执行以下操作：
function showResponse(responseText, statusText, xhr, $form) {
$('#success').html(responseText);
$('.contact-form')[0].reset();
$('.contact-form').trigger("reset");
}
同样，我在做假设，但 responseText 应该包含来自您的 PHP 页面的数据。 #success 看起来像 div 你希望你的表单反馈去的地方 html jQuery 函数将允许你将 responseText 放入 #success div.
虽然其他答案都显示了在没有插件的情况下执行此操作的方法，但看起来您正在使用 jQuery 插件。
编辑
阅读您的插件文档后，我认为您可能只需要添加：
$('.contact-form').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
您需要通读有关您正在使用的所有插件的文档。
编辑2
尝试将 Raj 的代码更改为
$('#submit').click(function(e){
e.preventDefault() //Prevent the default action of the form.
$.post( //Send a POST request to the PHP file via AJAX
"php/form-process.php", //Path to the PHP file where you want to send the POST
$(.contact-form).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {}), // This takes all the form fields and returns key-value pairs of form data
function (data) { //data = response from the PHP file. In your case "Sucess"
if(data==="success"){
//do something with data. Have assumed you want to append it to a div called "response". You will need to add <div id="success"> </div> below your form
$('#success').html(data);
} else {
$('#success').html("Sorry Try Again");
}
});
)}
我在 HTML 中有一个登录页面，其中涉及通过联系表发送数据。但是，如果您尝试使用联系表，当您单击 'Submit' 按钮时，您会打开一个新的 PHP 页面 'Success'。当我单击 'Submit' 时没有打开页面，但文本出现在 'Send' 按钮下方时，我该怎么做，文本为 'Messages sent successfully'?
我无法解决这个问题。我应该在 HTML 和 PHP 中更改什么？
这是我想做的事的示例图片：
HTML 代码：
<!-- Form -->
<form class="contact-form" role="form" method="post" action="php/form-process.php">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Nome" required="required">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
<textarea class="form-control" name="message" placeholder="Messaggio" rows="4" required="required"></textarea>
<input type="checkbox" name="trattdati" required /> Accetto il trattamento dei miei dati ai sensi del D.Lgs. 196/03<br />
<input type="checkbox" name="provasoftware" /> Desidero provare il software
<br /><br />
<button type="submit" id="submit" class="btn btn-lg btn-primary"
style="float:left">Invia</button>
<div id="success" class="success" style=" color: #009688;
font-size: 20px;
margin-top: -16px;
float: left;
margin-left: 25px;">
</div>
</form>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
var options = {
target: '#success', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// pre-submit callback
function showRequest(formData, jqForm, options) {
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
$('.contact-form')[0].reset();
$('.contact-form').trigger("reset");
}
// bind form using 'ajaxForm'
$('.contact-form').ajaxForm(options);
});
</script>
PHP 文件：
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
//if (empty($_POST["msg_subject"])) {
// $errorMSG .= "Subject is required ";
//} else {
// $msg_subject = $_POST["msg_subject"];
//}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "bagiacchimarco7@gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
//$Body .= "Subject: ";
//$Body .= $msg_subject;
//$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
如果单击提交按钮并填写所有内容然后重定向到 success_page.php，您可以使用只需添加 name="submit" 它应该可以工作 HTML:
更新 2： 工作示例 --->> sample website（不要介意这些错误，它只是一个简单的示例，您可以自己尝试一下。我补充说将 php 放入 html 文件中，它起作用了。希望这对你有帮助。
更新： 如果您 include 您在 div 中的 php 页面，您希望它应该打印出消息。
<form class="contact-form" role="form" method="post" action="">
<i class="mdi-action-account-box"></i>
<input type="text" class="form-control" name="name" placeholder="Nome" required="required">
<i class="mdi-content-mail"></i>
<input type="email" class="form-control" name="email" placeholder="Email" required="required">
<textarea class="form-control" name="message" placeholder="Messaggio" rows="4" required="required"></textarea>
<input type="checkbox" name="trattdati" required /> Accetto il trattamento dei miei dati ai sensi del D.Lgs. 196/03<br />
<input type="checkbox" name="provasoftware" /> Desidero provare il software
<br /><br />
<button type="submit" id="submit" class="btn btn-lg btn-primary" style="float:left">Invia</button>
<?php
$errorMSG = "";
// NAME
if (empty($_POST["name"])) {
$errorMSG = "Name is required ";
} else {
$name = $_POST["name"];
}
// EMAIL
if (empty($_POST["email"])) {
$errorMSG .= "Email is required ";
} else {
$email = $_POST["email"];
}
// MSG SUBJECT
//if (empty($_POST["msg_subject"])) {
// $errorMSG .= "Subject is required ";
//} else {
// $msg_subject = $_POST["msg_subject"];
//}
// MESSAGE
if (empty($_POST["message"])) {
$errorMSG .= "Message is required ";
} else {
$message = $_POST["message"];
}
$EmailTo = "bagiacchimarco7@gmail.com";
$Subject = "New Message Received";
// prepare email body text
$Body = "";
$Body .= "Name: ";
$Body .= $name;
$Body .= "\n";
$Body .= "Email: ";
$Body .= $email;
$Body .= "\n";
//$Body .= "Subject: ";
//$Body .= $msg_subject;
//$Body .= "\n";
$Body .= "Message: ";
$Body .= $message;
$Body .= "\n";
// send email
$success = mail($EmailTo, $Subject, $Body, "From:".$email);
// redirect to success page
if ($success && $errorMSG == ""){
echo "success message sent!";
}else{
if($errorMSG == ""){
echo "Something went wrong :(";
} else {
echo $errorMSG;
}
}
?>
<div id="success" class="success" style=" color: #009688;
font-size: 20px;
margin-top: -16px;
float: left;
margin-left: 25px;">
</div>
</form>
您需要通过 AJAX 向您的 PHP 文件发送 POST 请求，并在 DOM.
上处理响应jQuery/AJAX代码
$('#submit').click(function(e)
e.preventDefault() //Prevent the default action of the form.
$.post( //Send a POST request to the PHP file via AJAX
"path/to/file.php", //Path to the PHP file where you want to send the POST
$(.contact-form).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {}) // This takes all the form fields and returns key-value pairs of form data
, function (data) { //data = response from the PHP file. In your case "Sucess"
if(data==="success"){
//do something with data. Have assumed you want to append it to a div called "response". You will need to add <div id="response"> </div> below your form
$('#response').html(data);
} else {
$('#response').html("Sorry Try Again");
}
//Alternatively you can just append data to response and not have this IF
});
)
也请查看 validate.js。它在前端本身处理表单验证，还有一个非常好的方法来提交表单和管理响应。
假设您根据所使用的任何插件的文档正确使用 Javascript，您应该能够简单地执行以下操作：
function showResponse(responseText, statusText, xhr, $form) {
$('#success').html(responseText);
$('.contact-form')[0].reset();
$('.contact-form').trigger("reset");
}
同样，我在做假设，但 responseText 应该包含来自您的 PHP 页面的数据。 #success 看起来像 div 你希望你的表单反馈去的地方 html jQuery 函数将允许你将 responseText 放入 #success div.
虽然其他答案都显示了在没有插件的情况下执行此操作的方法，但看起来您正在使用 jQuery 插件。
编辑
阅读您的插件文档后，我认为您可能只需要添加：
$('.contact-form').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
您需要通读有关您正在使用的所有插件的文档。
编辑2
尝试将 Raj 的代码更改为
$('#submit').click(function(e){
e.preventDefault() //Prevent the default action of the form.
$.post( //Send a POST request to the PHP file via AJAX
"php/form-process.php", //Path to the PHP file where you want to send the POST
$(.contact-form).serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {}), // This takes all the form fields and returns key-value pairs of form data
function (data) { //data = response from the PHP file. In your case "Sucess"
if(data==="success"){
//do something with data. Have assumed you want to append it to a div called "response". You will need to add <div id="success"> </div> below your form
$('#success').html(data);
} else {
$('#success').html("Sorry Try Again");
}
});
)}