本文介绍了使用ajax提交表单时如何发送电子邮件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个名为buyback.php的页面上有一个表单，该表单位于页面的底部.表单的编码为:-
i have a form on a page called buyback.php and that form is at the bottom of the page. the coding of the form is:-
<div class="mktoForm" id="elqForm">
<form id="elqForm" method="post" name="elqForm" action="buyback.php">
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718959"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Contact_First_Name"><strong>First Name</strong> *:</label>
<input type="text" required="required" id="Contact_First_Name" name="Contact_First_Name" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718960"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Contact_Last_Name"><strong>Last Name</strong> *:</label>
<input type="text" required="required" id="Contact_Last_Name" name="Contact_Last_Name" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718961"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Contact_Email"><strong>Business Email</strong> *:</label>
<input type="text" required="required" pattern="[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" id="Contact_Email" name="Contact_Email" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718962"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Job_Responsibility"><strong>Job Title</strong> *:</label>
<input type="text" required="required" id="Job_Responsibility" name="Job_Responsibility" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718963"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Company_Name"><strong>Company Name</strong> *:</label>
<input type="text" required="required" id="Company_Name" name="Company_Name" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718964"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Company_Country"><strong>Country</strong> *:</label>
<input type="text" required="required" id="Company_Country" name="Company_Country" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718965"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Company_State_Province"><strong>City</strong> *:</label>
<input type="text" required="required" id="Company_State_Province" name="Company_State_Province" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Contact_Phone_Number"><strong>Business Phone Number</strong> *:</label>
<input type="text" required="required" id="Contact_Phone_Number" name="Contact_Phone_Number" autocomplete="off">
</div>
<div class="elqFormRow">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718966"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<label for="Number_Of_Employees"><strong>Number of Employees</strong> *:</label>
<select id="Number_Of_Employees" name="Number_Of_Employees">
<option value="bet10and49">Between 10 and 49</option>
<option value="bet50and99">Between 50 and 99</option>
<option value="bet100and199">Between 100 and 199</option>
<option value="ab200">Above 200</option>
</select>
</div>
<div class="elqFormRow text-center">
<div style="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><a name="eiel1718967"><img src="x.gif" width="1" height="0" style="display:block; height:0px !important;" class="anchorlink_image" alt=""></a></div>
<div class="elqFormRow text-center">
<input type="submit" id="elqFormSubmitBut" name="elqFormSubmitBut" class="orange_btn" value="Submit" checkrequired="true">
</div>
</div>
</form>
<div id="result"><?php if(isset($result)){ echo $result; } ?></div>
</div>
以这种形式存在一个div，它是< div id ="result"></div> ，我想以该形式打印成功消息.目前，我正在读取字段值，并通过php通过以下方式发送电子邮件:-
in that form there is a div which is <div id="result"></div>and i want to print a success message in that form. currently i am reading the field values and sending the email by php by saying:-
if ($_POST['elqFormSubmitBut']) {
$Contact_First_Name = $_POST['Contact_First_Name'];
$Contact_Last_Name = $_POST['Contact_Last_Name'];
$Contact_Email = $_POST['Contact_Email'];
$Job_Responsibility = $_POST['Job_Responsibility'];
$Company_Name = $_POST['Company_Name'];
$Company_Country = $_POST['Company_Country'];
$Company_State_Province = $_POST['Company_State_Province'];
$Contact_Phone_Number = $_POST['Contact_Phone_Number'];
$Number_Of_Employees = $_POST['Number_Of_Employees'];
$to = "[email protected]";
$from = "[email protected]";
switch ($Number_Of_Employees) {
case "bet10and49": $Number_Of_Employees = "Between 10 and 49"; break;
case "bet50and99": $Number_Of_Employees = "Between 50 and 99"; break;
case "bet100and199": $Number_Of_Employees = "Between 100 and 199"; break;
case "ab200": $Number_Of_Employees = "Above 200"; break;
}
$message = "
Contact First Name: $Contact_First_Name<br/>
Contact Last Name: $Contact_Last_Name<br/>
Contact Email: $Contact_Email<br/>
Job Responsibility: $Job_Responsibility<br/>
Company Name: $Company_Name<br/>
City: $Company_State_Province<br/>
Business Phone Number: $Contact_Phone_Number<br/>
Number Of Employees: $Number_Of_Employees";
$subject = "New Message from the Buyback Form";
$header = 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$header .= 'From:'. $from . " \r\n";
if (mail($to, $subject, $message, $header)) {
$result = "Thank you for contacting us. We will reply you as soon as possible";
} else {
$result = "Message Sending Failed, try again";
}
}
并且我在div中回显$ result.如何编写等效的Ajax代码以发送电子邮件并在该div中写入结果消息?我需要有人告诉我确切的内容
and i am echoing $result in the div. how do i write the equivalent ajax code to send the email and write the result message in that div? i need someone to plz tell me exactly what to write
推荐答案
您有两个选择，香草JavaScript或jQuery.
You have two options, vanilla JavaScript or jQuery.
您不需要对HTML进行任何重大更改，只需在要调用的函数中添加 onsubmit ="return function()" 属性，在这种情况下，我们将使用 sendForm().
You don't need any major changes to your HTML, you just need to add a onsubmit="return function()" attribute with the function you want to call, in this case we will be using sendForm().
<form id="elqForm" method="post" name="elqForm" onsubmit="return sendForm()">
JavaScript
在JavaScript代码中的其他地方，您必须添加以下行:
JavaScript
Somewhere else in your JavaScript code, you must add this lines:
香草JavaScript:
function sendForm(){
var form = document.querySelector('elqForm');
var data = new FormData(form);
const Http = new XMLHttpRequest();
const url='path/to/your/phpfile.php';
Http.open("POST", url);
Http.send(data);
Http.onreadystatechange = function () {
if(Http.readyState === XMLHttpRequest.DONE && Http.status === 200) {
document.getElementById("result").innerHTML = Http.responseText;
}
};
return false;
}
使用jQuery:
function sendForm(){
var data = $("#elqForm").serialize();
$.ajax({
type: "POST",
url: "path/to/your/phpfile.php",
data: data,
success: function(response){
$("#result").html(response);
}
});
}
PHP
只需更改此行即可回显要在div中输出的文本.
PHP
Just change this lines to echo the text you want to output in your div.
if (mail($to, $subject, $message, $header)) {
echo "Thank you for contacting us. We will reply you as soon as possible";
} else {
echo "Message Sending Failed, try again";
}
这篇关于使用ajax提交表单时如何发送电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！