Question

我在页面上有一个名为buyback.php的表单，该表单位于页面底部。表单的编码为：-

<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 id="result"></div>的div，我想以该表格打印成功消息。目前，我正在读取字段值，并通过php通过以下方式发送电子邮件：-

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 = "aaa@gmail.com";
$from = "bbb@gmail.com";

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中写入结果消息？我需要有人告诉我确切的内容

Answer 1

您有两个选择，香草JavaScript或jQuery。

HTML

您不需要对HTML进行任何重大更改，只需在要调用的函数中添加onsubmit="return function()"属性，在这种情况下，我们将使用sendForm()。

<form id="elqForm" method="post" name="elqForm" onsubmit="return sendForm()">

JavaScript

在JavaScript代码的其他地方，您必须添加以下行：

香草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：

https://api.jquery.com/

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中输出的文本。

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";
}

Answer 2

此代码已由我测试

您的代码已做了大量修改。添加了更多功能，例如消息成功或失败时一段时间后，邮件会通过ajax消失。

好的，这就是我所做的。我正在通过formData（）方法使用ajax发送您的数据。

您的提交按钮现在已在下面进行了修改。

<input type="submit" value="Submit" class="orange_btn" name="elqFormSubmitBut"/>

您的ajax结果div在下面进行了修改，因此删除了其上的php脚本

<div id="result"></div>

在服务器后端，您的结果响应也已根据以下内容进行了修改

echo "<div  id='fadebox'>Thank you for contacting us. We will reply you as soon as possible</div>";

您可以看到具有 fadebox 属性的ID。那就是一段时间后通过ajax发布淡出结果响应的原因。你可以增加或减少Ajax代码中的时间。

我想由于邮件的原因，您需要在线才能正确测试脚本

<html>
<head>
<title>PHP AJAX Image Upload</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#elqForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "buyback.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#result").html(data);

                                    $('#fadebox').delay(5000).fadeOut('slow');
            },
            error: function() 
            {
            }           
       });
    }));
});
</script>
</head>
<body>






<div class="mktoForm">
<form id="elqForm" action="buyback.php" method="post">
            <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" value="Submit" class="orange_btn" name="elqFormSubmitBut"/>
                      </div>
            </div>
        </form>
        <div id="result"></div>
    </div>


</body>
</html>

这是修改后的 buyback.php 。您还可以看到结果响应是如何修改的，我只是使用first_name进行了验证

<?php
// validate  using first name

if ($_POST['Contact_First_Name']) {
$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 = "aaa@gmail.com";
$from = "bbb@gmail.com";

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 = "";
echo "<div  id='fadebox'>Thank you for contacting us. We will reply you as soon as possible</div>";

} else {

echo "<div  id='fadebox'>Message Sending Failed, try again</div>";
}
}
?>

使用Ajax提交表单时如何发送电子邮件

2 个答案:

HTML

JavaScript

PHP