I am working on creating a contact us form for a website. I am using jquery to create an .click() function for an html button. then using ajax to call the email.php code. When I click the button the console displays the following error:
500 (Internal Server Error).
I'm new to ajax and php being used together so I have no idea what to do at this point.
Here is the HTML form:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "js/callmail.js"></script>
</head>
<body ng-app = "">
<div class = "container">
<form name = "contact">
<label for = "subject" class = "control-label">Subject:</label>
<input name = "subject" id = "subject" ng-model = "subject" required/>
<span class = "warning" ng-show="contact.subject.$touched && contact.subject.$invalid">You Must Enter a subject!</span>
<span class = "success" ng-show="contact.subject.$touched && contact.subject.$valid">Valid!</span>
<br/>
<label for = "body" class = "control-label">Body:</label>
<input name = "body" id = "body" ng-model = "body" required/>
<span class = "warning" ng-show="contact.body.$touched && contact.body.$invalid">Your email must have a body!</span>
<span class = "success" ng-show="contact.body.$touched && contact.body.$valid">Valid!</span>
<br/>
<label for = "signature" class = "control-label">Return Email:</label>
<input name = "signature" id = "signature" ng-model = "signature" type = "email" required/>
<span class = "warning" ng-show="contact.signature.$touched && contact.signature.$invalid">You must enter a valid return email!</span>
<span class = "success" ng-show="contact.signature.$touched && contact.signature.$valid">Valid!</span>
<br/>
<button ng-disabled = "contact.$invalid" id = "sendmail" type = "submit" class = "btn btn-success">Submit</button>
</form>
</div>
and here is the jQuery/AJAX call to the php code:
$(function() {
$("#sendmail").click(function() {
var data = {
to: "myemail",
subject: $("#signature").val() + ": " + $("#subject").val(),
message: $("#body").val()
}
$.ajax({
type: "POST",
url: "email.php",
data: data,
success: function() {
alert("Message sent");
}
});
console.log(data);
});
});
And finally, here is the php code that is responsible for sending out the email:
<?php
if ($_POST["submit"]) {
$subject = $_POST["subject"];
$message = $_POST["message"];
$headers = "From: " . $_POST["name"] . "Reply to: " . $_POST["signature"];
mail("myemail", $subject, $message, $headers))
}
?>
Any help would be greatly appreciated.
