HTML form: Send an additional notification email via jQuery and PHP mail

Question

I'm using a form on a website which comes from http://granot.com/ which is a CRM software for moving companies. This form is basically an estimate request, and it writes something in the CRM database.

Unfortunately it doesn't send email notifications, so the question is if it would be possible to attach a notification feature to the form, without influencing its original purpose. And which method would be the most elegant one.

Here's the form how it is being supplied by Granot (I know it can be improved in many other ways as well, but that't not my question right now) :

<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>

It comes with some verification JavaScript, but I don't think that's very relevant here. Never the less:

<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>

I'm looking forward to ideas - thanks in advance!

Update:

According the the first answers I tried the following (Spoiler: unfortunately without success):

I created an email.php in the sites root folder, containing

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

And I tried triggering it by placing the following directly into the page where the form is located (above the form in case that matters). Based on the suggested solution by @Flynn in a combination with copy and pasting from 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>

The console doesn't spit out any script errors. Any hints what I'm doing wrong? Thank you!

Answer 1

There is unfortunately no way I know of to send an email directly from Javascript.

However, you could use an AJAX call to a server and use that to send the email.

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

I don't know what Javascript libraries you are using, but the AJAX call could really simple using jQuery