javascript - HTML 表单 : Send an additional notification email via jQuery and PHP mail

Question

我正在使用来自 http://granot.com/ 的网站上的表单。这是一款针对搬家公司的CRM软件。该表格基本上是一个估算请求，它会在 CRM 数据库中写入一些内容。

不幸的是，它不发送电子邮件通知，因此问题是是否可以将通知功能附加到表单，而不影响其原始目的。哪种方法是最优雅的。

这是 Granot 提供的表格(我知道它也可以通过许多其他方式进行改进，但这不是我现在的问题):

<form name="theForm" method="post">
<input type="HIDDEN" name="MODULE" value="EST">
<input type="HIDDEN" name="REF" value="WEBSITE">   
<div align="center">
  <center>   
<table width="500" border="0" cellspacing="1" cellpadding="2" bordercolor="#03346C" style="border-collapse: collapse">  
  <tr>
   <td height="9" width="177"><b><font face="Verdana" size="2">Customer Name:</font></b></td>
   <td height="9" width="303"><input type="text" class="textFeilds" name="SNAME" size="20" style="border: 1px solid #000000; " tabindex="1"></td>
  </tr>
  <tr>
   <td height="10" width="177"><b><font face="Verdana" size="2">Customer Email:</font></b></td>
   <td height="10" width="303"><input type="text" class="textFeilds" name="EMAIL" size="20" style="border: 1px solid #000000; " tabindex="2"></td>
  </tr>
  <tr>
   <td height="12" width="177"><b><font face="Verdana" size="2">Contact Phone:</font></b></td>
   <td height="12" width="303"><input type="text" class="textFeilds" name="STELH" size="20" style="border: 1px solid #000000; " tabindex="3"></td>
  </tr>
  <tr>
   <td height="15" width="177"><b><font face="Verdana" size="2">Moving Date:</font></b></td>
   <td height="15" width="303">
                        <select name="MM" id="MM" tabindex="5">
                          <option value="" selected>Month</option>
                          <option value="January">January</option>
                          <option value="February">February</option>
                          <option value="March">March</option>
                          <option value="April">April</option>
                          <option value="May">May</option>
                          <option value="June">June</option>
                          <option value="July">July</option>
                          <option value="August">August</option>
                          <option value="September">September</option>
                          <option value="October">October</option>
                          <option value="November">November</option>
                          <option value="December">December</option>
                        </select><select name="DD" class="textFeilds3" id="DD" tabindex="6">
                          <option  selected value="">Day</option>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                          <option value="21">21</option>
                          <option value="22">22</option>
                          <option value="23">23</option>
                          <option value="24">24</option>
                          <option value="25">25</option>
                          <option value="26">26</option>
                          <option value="27">27</option>
                          <option value="28">28</option>
                          <option value="29">29</option>
                          <option value="30">30</option>
                          <option value="31">31</option>
                        </select><select name="YY" class="textFeilds3" id="YY" tabindex="7">
                          <option value="2014" selected>2014</option>
                          <option value="2015">2015</option>
                        </select></td>
  </tr>    
  <tr>
   <td height="15" width="177"><b><font face="Verdana" size="2">Moving From Zip Code:</font></b></td>
   <td height="15" width="303"><input type="text" class="textFeilds" name="SZIP" size="7" style="border: 1px solid #000000;" tabindex="8"></td>
  </tr>
  <tr>
   <td height="17" width="177"><b><font face="Verdana" size="2">Moving To Zip Code:</font></b></td>
   <td height="17" width="303"><input type="text" class="textFeilds" name="RZIP" size="7" style="border: 1px solid #000000;" tabindex="9">
   <b><font face="Verdana" size="1"><a href="javascript:locatezip()">Locate Your Zip Code</a></font></b></td>
  </tr>
  <tr>
   <td height="19" width="177"><b><font face="Verdana" size="2">Volume:</font></b></td>
   <td height="19" width="303">
   <select name="ROOMS" class="textFeilds3" tabindex="10" style="border: 2px solid; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; ">
                            <option selected>< Select weight of move></option>
                            <option value="STU">Studio</option>
                            <option value="ONE">One bedroom</option>
                            <option value="TWO">Two bedrooms</option>
                            <option value="THR">Three bedrooms</option>
                            <option value="FOU">Four bedrooms</option>
                            <option value="FIV">Five bedrooms</option>
                            <option value="SIX">Six bedrooms and more</option>
                      </select></td>
  </tr>
  <tr> 
   <td height="44" colspan="2" align="center" width="485"><br><input type="button" name="btnSubmit" onclick="SubmitEntry()" style="background-color:#083484; width:125; height:25; font-family:Verdana; font-size:10pt; font-weight:bold;color:#FFFFFF;CURSOR:HAND;" value="Get Your Quote" tabindex="10"></td>
 </tr>  
</table>
  </center>
</div>
</form>

它带有一些验证 JavaScript，但我认为这与这里无关。尽管如此:

<script language="JavaScript" src="http://gorilla.hellomoving.com/XXXXX/formcheck.js"> </script>
<script language="JavaScript" type="text/JavaScript">


function checkData(){
    frm = document.theForm;
    return lengthValid(frm.SNAME, 4,"full name") 
    && emailValid(frm.EMAIL, 4,"Email")
    && lengthValid(frm.STELH, 10,"ten digits phone number")
    && selectValid(frm.MM, "month") 
    && selectValid(frm.DD, "day")   
    && zipValid(frm.SZIP, 5, "five digits origin zip code -US only") 
    && zipValid(frm.RZIP, 5, "five digits destination zip code - US only")
    && selectValid(frm.ROOMS,"weight")
    }

function SubmitEntry() {
        if (checkData()) {
            document.theForm.action="http://gorilla.hellomoving.com/wc.dll?mpdir~moduleret~XXXXX";
            document.theForm.submit();
            }
      }  

function locatezip() {
    window.open('http://gorilla.hellomoving.com/wc.dll?mputil~zipwc~NEW','EANITHING','toolbar=no,location=no,directories=no,status=no,menubar=no,resizable=no,copyhistory=no,scrollbars=yes,width=550,height=500');
self.name="main"}
</script>

我期待着想法 - 提前致谢!

更新:

根据第一个答案，我尝试了以下操作(剧透:不幸的是没有成功):

我在站点根文件夹中创建了一个email.php，其中包含

<?php
if($_POST){
    mail("admin@domain.com", "The form has been filled out", "Head over to Granot and check it out");
}
?> 

我尝试通过将以下内容直接放置到表单所在的页面中(如果重要，则在表单上方)来触发它。基于@Flynn 建议的解决方案，结合来自 this question 的复制和粘贴.

<script>

function SubmitEntry() {
    if (checkData()) {
        document.theForm.action="http://gorilla.hellomoving.com/wc.dll?mpdir~moduleret~XXXXX";
        document.theForm.submit();

       $.ajax({
            type: "POST",
            url: "/email.php",
            data: dataString,
        });
        }
  }
</script>

控制台不会输出任何脚本错误。有任何提示我做错了什么吗？谢谢!

Answer 1

不幸的是，我不知道如何直接从 Javascript 发送电子邮件。

但是，您可以使用 AJAX 调用服务器并使用它来发送电子邮件。

function SubmitEntry() {
    if (checkData()) {
        document.theForm.action="http://gorilla.hellomoving.com/wc.dll?mpdir~moduleret~XXXXX";
        document.theForm.submit();
        // Insert AJAX call here
        }
  }

我不知道您正在使用什么 Javascript 库，但是使用 jQuery 可以非常简单地进行 AJAX 调用。