This question already has an answer here:
I've the following contact form in my website. But the form data is being appended onto the URL and the json is not being sent to the PHP mail handler. Below are my code for the form.
HTML
<form novalidate="novalidate" style="width:60%;margin-left:auto;margin-right:auto;" onsubmit="sendMailNew()">
<div class="col-md-12">
<div class="col-md-6" style="padding-right: 5px">
<input type="text" class="form-control" name="contact_uname" id="contact_uname" placeholder="NAME" style="width:100%">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="contact_no" id="contact_no" placeholder="PHONE NUMBER" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input class="form-control" type="email" name="contact_email" id="contact_email" placeholder="E-MAIL ADDRESS" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_company" id="contact_company" placeholder="COMPANY" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_website" id="contact_website" placeholder="EXISTING WEBSITE(if any)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_social" id="contact_social" placeholder="WHAT WOULD YOU LIKE(website, social media etc)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_budget" id="contact_budget" placeholder="BUDGET(if we know approximately how much you're hoping to spend. we can (hopefully) come up with a strategy that fits your budget.)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_section" id="contact_section" placeholder="WHAT SECTION WOULD YOU LIKE ON THE SITE" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_update" id="contact_update" placeholder="WHICH OF THOSE SECTIONS WILL YOU WANT TO BE ABLE TO UPDATE YOURSELF?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_design" id="contact_design" placeholder="ANY IDEA ON THE STYLE OT DESIGN? DO YOU HAVE REFERENCES?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_timeline" id="contact_timeline" placeholder="TIMELINE(when do you want to launch?)" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_hear" id="contact_hear" placeholder="HOW DID YOU HEAR ABOUT US?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top: 3%">
<input type="text" class="form-control" name="contact_comment" id="contact_comment" placeholder="ANY OTHER COMMENTS?" style="width:100%">
</div>
<div class="col-md-12" style="margin-top:3%">
<button type="submit" name="submit" value="submit" style="position:relative;left:45%;color:#22252c !important;background-color:white !important" class="btn btn-default">SUBMIT NOW</button>
</div>
</div>
</form>
AJAX script
<script type="text/javascript">
function sendMailNew()
{
$.ajax({
type: 'POST',
url: 'contactmail.php',
data: { cname: $("#contact_uname").val(), cno: $().val("#contact_no"), cemail: $("#contact_email").val(), ccompany: $("#contact_company").val(), cwebsite: $("#contact_website").val(), csocial: $("#contact_social").val(), cbudget: $("#contact_budget").val(), csection: $("#contact_section").val(), cupdate: $("#contact_update").val(), cdesign: $("#contact_design").val(), ctimeline: $("#contact_timeline").val(), chear: $("#contact_hear").val(), ccomment: $("#contact_comment").val() },
async: false,
success: function (data) {
$("#contact_uname").val()=data;
$("#contact_no").val()="";
$("#contact_email").val()="";
$("#contact_company").val()="";
$("#contact_website").val()="";
$("#contact_social").val()="";
$("#contact_budget").val()="";
$("#contact_section").val()="";
$("#contact_update").val()="";
$("#contact_design").val()="";
$("#contact_timeline").val()="";
$("#contact_hear").val()="";
$("#contact_comment").val()="";
},
dataType: 'json',
error: function (e, g, y) {
var msg = e;
}
});
alert('Thanks for submitting the form, we will get back to you soon!');
}
</script>
PHP mail handler
<?php
if(isset($_POST['submit'])){
$to = "pavan@tip.agency";
$from = $_POST['contact_email']; // this is the sender's Email address
$name = $_POST['contact_uname'];
$number = $_POST['contact_no'];
$company = $_POST['contact_company'];
$website = $_POST['contact_website'];
$social = $_POST['contact_social'];
$budget = $_POST['contact_budget'];
$section = $_POST['contact_section'];
$update = $_POST['contact_update'];
$design = $_POST['contact_design'];
$timeline = $_POST['contact_timeline'];
$hear = $_POST['contact_hear'];
$comment = $_POST['contact_comment'];
$subject = "Form submission";
$subject2 = "Copy of your form submission";
$message = "Name:" . $name . "
Email: " . $from . "
Number:" . $number . "
Company:" . $company . "
Website:" . $website . "
Social:" . $social . "
Budget:" . $budget . "
Section:" . $section . "
Update:" . $update . "
Design:" . $design . "
Timeline:" . $timeline . "
Hear:" . $hear . "
Comment:" . $comment;
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
}
?>
Any idea how to fix this?
Thanks in advance!!
</div>
Stop default action in javascript first.
<script type="text/javascript">
function sendMailNew()
{
event.preventDefault();
//Your rest of JS here
}
</script>
I'm not sure but you may need to add action="" to the form. Let us know if it solves.
the option is not type: 'POST', it is method: 'POST'. So by default it should be a GET request.
In your PHP Script, you take the values from "$_POST", so it can not find your parameters. Just try it this way. I prefer to use $.post, not $.ajax for my post requests. To make the script better, you should prevent default event and maybe use the url to submit your data as attribute action, and take it by $('form').attr('action') for your request.
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
I prefer this way, it looks just cleaner and you can not make a misstake with submit method:
function sendMailNew(e)
{
e.preventDefault();
var $form = $('form');
var url = $form.attr('action') || 'contactmail.php';
var params = {
cname: $("#contact_uname").val(),
cno: $().val("#contact_no"),
cemail: $("#contact_email").val(),
ccompany: $("#contact_company").val(),
cwebsite: $("#contact_website").val(),
csocial: $("#contact_social").val(),
cbudget: $("#contact_budget").val(),
csection: $("#contact_section").val(),
cupdate: $("#contact_update").val(),
cdesign: $("#contact_design").val(),
ctimeline: $("#contact_timeline").val(),
chear: $("#contact_hear").val(),
ccomment: $("#contact_comment").val()
};
$.post(url, params, function(data, status) {
$("#contact_uname").val()=data;
$("#contact_no").val()="";
$("#contact_email").val()="";
$("#contact_company").val()="";
$("#contact_website").val()="";
$("#contact_social").val()="";
$("#contact_budget").val()="";
$("#contact_section").val()="";
$("#contact_update").val()="";
$("#contact_design").val()="";
$("#contact_timeline").val()="";
$("#contact_hear").val()="";
$("#contact_comment").val()="";
}, 'json').fail(function() {
alert( "error" );
});
}