[英]HTML form post PHP file on submission rather than sending an email
以下是表單的 HTML 代碼,此外它是用於將數據接收到所需電子郵件地址的 php 代碼。 提交時,它會重定向到 php 代碼,而不是發送郵件。 提前致謝。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Form</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
$("#htmlform").submit(function (e) {
var url = "html_form_send.php"; // the script where you handle the form input.
$.ajax({type: "POST",
url: url,
data: $(this).serialize(), // serializes the form's elements.
success: function (data) {
alert(data); // show response from the php script.
}});
e.preventDefault(); // avoid to execute the actual submit of the form
});
});
</script>
</head>
<form name="htmlform" id="htmlform" method="post" action="html_form_send.php">
<table width="450px">
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="last_name">Last Name *</label>
</td>
<td valign="top">
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
**<input class="Submit" type="submit" name="Submit" value="Submit"/>**
</td>
</tr>
</table>
</form>
</body>
</html>
PHP代碼
<?php
if ( isset( $_POST['first_name'] ) ) { // <<<< Changes i have made
$email_to = "Name@gmail.com"; // <<<<<<< This is temporary.
$email_subject = "website html form submissions";
function died($error) {
// your error code can go here
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['first_name']) ||
!isset($_POST['last_name']) ||
!isset($_POST['email']) ||
!isset($_POST['telephone']) ||
!isset($_POST['comments'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$first_name = $_POST['first_name']; // required
$last_name = $_POST['last_name']; // required
$email_from = $_POST['email']; // required
$telephone = $_POST['telephone']; // not required
$comments = $_POST['comments']; // required
$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
if(!preg_match($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
$string_exp = "/^[A-Za-z .'-]+$/";
if(!preg_match($string_exp,$first_name)) {
$error_message .= 'The First Name you entered does not appear to be valid.<br />';
}
if(!preg_match($string_exp,$last_name)) {
$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "First Name: ".clean_string($first_name)."\n";
$email_message .= "Last Name: ".clean_string($last_name)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Telephone: ".clean_string($telephone)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
mail( $email_to, $email_subject, $email_message, $headers );
}
?>
使用 ajax 和e.preventDefault();
發布您的表單e.preventDefault();
將避免重定向。 我認為這對於評論來說太長了,但我指的是你的評論。
你只是忘了給表單一個 id 外觀在你的代碼中改變這個:
JavaScript:
$("#htmlform").submit(function (e) {....
PHP:
<form name="htmlform" id="htmlform"....
您必須在下面的示例中更改它:
var url = "path/to/your/html_form_send.php";// insert your path to the php file
這是一個工作示例:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
$("#htmlform").submit(function (e) {
var url = "path/to/your/html_form_send.php"; // the script where you handle the form input.
$.ajax({type: "POST", url: url, data: $(this).serialize(), // serializes the form's elements.
success: function (data) {
alert(data); // show response from the php script.
}});
e.preventDefault(); // avoid to execute the actual submit of the form
});
});
</script>
<form name="htmlform" id="htmlform" method="post" action="html_form_send.php">
<table width="450px">
<!-- just removed for testing -->
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</table>
</form>
html_form_send.php
<?php
if ( isset( $_POST['Submit'] ) ) {
$email_to = "Name@gmail.com";
/**
* JUST SHORTENED FOR THIS EXAMPLE
*/
// save the return of the mail function, if you are using the @
$sent = @mail( $email_to, $email_subject, $email_message, $headers );
echo json_encode( array( "success" => $sent ) ); // return something that you can use in javascript
}// <<<<<<< YOU FORGOT THIS
?>
提示:來自jQuery 文檔:
注意:只有“成功控制”被序列化為字符串。 沒有提交按鈕值被序列化,因為表單不是使用按鈕提交的。
所以你的if
永遠不會是真的,因為你正在使用序列化
if ( isset( $_POST['Submit'] ) ) {
只需將其更改為
if ( isset( $_POST['first_name'] ) ) {
或在您的表單中添加一個名為“提交”的隱藏輸入字段
<form name="htmlform" id="htmlform" method="post" action="html_form_send.php">
<input type="hidden" name="Submit" value="some value" />
如果您提交表單,您將被發送到您在action
參數中指定的文檔。
如果您想將數據發送到您的 php 而不加載到不同的頁面,您可以使用 ajax 調用,您可以通過 javascript 在 buttonclick 上調用它,或者只是簡單地將您的 php 與您的 html 文檔合並並在您的action
引用一個“#”范圍。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.