Skip to content Skip to sidebar Skip to footer
Home / Ajax / Javascript / Php

How Do I Send An Email When The Form Is Submitted By Using Ajax

Post a Comment
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:-
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

Somewhere else in your JavaScript code, you must add this lines:

Vanilla JavaScript:

functionsendForm(){
   var form = document.querySelector('elqForm');
   var data = newFormData(form);
   constHttp = newXMLHttpRequest();
   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;
    }
};
returnfalse;
}

With jQuery:

https://api.jquery.com/

functionsendForm(){
   var data = $("#elqForm").serialize();
   $.ajax({
     type: "POST",
     url: "path/to/your/phpfile.php",
     data: data,
     success: function(response){
        $("#result").html(response);
     }
   });
}

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

Solution 2:

This code has been tested by me

Alot of modifications has been done to your code. More features added like when a message is successful or failed the respectives messages will fading out after some time via ajax.

okay here is what I have done. I am sending your data using ajax as you wanted via formData() method.

Your submit button is now modified below.

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

Your ajax result div modified below thus removing php script on it

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

At your Server backend your result response has also be modified as per below

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

You can see id having fadebox attributes. Thats what fades out result response via ajax post after sometime. You can increase or reduce the time in the ajax code.

I guess You will need to be online to test your script properly because of the mail

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

                                    $('#fadebox').delay(5000).fadeOut('slow');
            },
            error: function() 
            {
            }           
       });
    }));
});
</script></head><body><divclass="mktoForm"><formid="elqForm"action="buyback.php"method="post"><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718959"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Contact_First_Name"><strong>First Name</strong> *:</label><inputtype="text"required="required"id="Contact_First_Name"name="Contact_First_Name"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718960"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Contact_Last_Name"><strong>Last Name</strong> *:</label><inputtype="text"required="required"id="Contact_Last_Name"name="Contact_Last_Name"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718961"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Contact_Email"><strong>Business Email</strong> *:</label><inputtype="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><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718962"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Job_Responsibility"><strong>Job Title</strong> *:</label><inputtype="text"required="required"id="Job_Responsibility"name="Job_Responsibility"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718963"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Company_Name"><strong>Company Name</strong> *:</label><inputtype="text"required="required"id="Company_Name"name="Company_Name"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718964"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Company_Country"><strong>Country</strong> *:</label><inputtype="text"required="required"id="Company_Country"name="Company_Country"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718965"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Company_State_Province"><strong>City</strong> *:</label><inputtype="text"required="required"id="Company_State_Province"name="Company_State_Province"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718966"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Contact_Phone_Number"><strong>Business Phone Number</strong> *:</label><inputtype="text"required="required"id="Contact_Phone_Number"name="Contact_Phone_Number"autocomplete="off"></div><divclass="elqFormRow"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718966"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><labelfor="Number_Of_Employees"><strong>Number of Employees</strong> *:</label><selectid="Number_Of_Employees"name="Number_Of_Employees"><optionvalue="bet10and49">Between 10 and 49</option><optionvalue="bet50and99">Between 50 and 99</option><optionvalue="bet100and199">Between 100 and 199</option><optionvalue="ab200">Above 200</option></select></div><divclass="elqFormRow text-center"><divstyle="line-height:0px;font-size:0px;padding:0;margin:0;max-height:0px;"><aname="eiel1718967"><imgsrc="x.gif"width="1"height="0"style="display:block; height:0px !important;"class="anchorlink_image"alt=""></a></div><divclass="elqFormRow text-center"><inputtype="submit"value="Submit"class="orange_btn"name="elqFormSubmitBut"/></div></div></form><divid="result"></div></div></body></html>

here is the modified buyback.php. you can also see how the result response is modified and I just does validate using first_name

<?php// validate  using first nameif ($_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>";
}
}
?>

Post a Comment for "How Do I Send An Email When The Form Is Submitted By Using Ajax"