Send info with ajax to submit.php - php

Question

Heys guys, I've been playing around with this ajax call for a few days now. I had it posting an email with no variables earlier, but now I can't get the call to submit the form with a variable or without. Here is my code:
<form id="contactform" method="post" action="submit.php">
<input type="text" placeholder="Name" name="username" id="username" />
<input type="email" placeholder="Your Email Address" name="email" id="email" />
<input type="button" id="submit" class="submit" value="submit"></a>
</form>
AJAX:
<script type="text/javascript">
$("#submit").click(function(event){
var data = $('#contactform').serialize();
event.preventDefault();
$.ajax({
url: "submit.php",
type: "POST",
data: data,
success: function() {
alert("Success!");
}
});
return false;
});
});
</script>
submit.php:
<?php
$from = "info#email.com";
$usersubject = "Thank You!";
$usermessage = "Thank you for signing up!";
$to = $_REQUEST['email'];
$subject = "Form Info";
?>
<?php
$name = $_REQUEST['username'];
$email = $_REQUEST['email'];
$message = "Name: $name
Email: $email";
$headers = "From:" . $from;
//mail($to,$subject,$message,$headers);
mail($email,$usersubject,$usermessage,$headers);
echo 'Success';
?>
submit.php works when you access it directly with the variable (www.website.com/submit.php?username=Dave&email=davesemail#mail.com). Is there an error somewhere here that I'm missing? Any help is appreciated!

Answer 1

This what you want but you should learn about Json.
data={
"name":"James Bond","email":"AGENT007#MI5.gov "
}

Answer 2

If you don't use a document ready block:
$( document ).ready(function() {
// your code here
});
Then make sure you put your javascript code just before the closing body tag ().
Otherwise if you put the javascript in the header without a document ready the javascript code will be executed before the submit button is present on the page and therefor the $('#submit') selector will return zero elements.

Answer 3

HTML:
<form method="post" action="submit.php">
<input type="text" placeholder="Name" name="username" id="username" />
<input type="email" placeholder="Your Email Address" name="email" id="email" />
<input type="button" onClick="submit()" value="submit"></a>
</form>
AJAX:
<script type="text/javascript">
function submit(){
var user = document.getElementById("username").value;
var email = document.getElementById("email").value;
$.ajax({
url: "submit.php",
type: "POST",
data: {uname:user,email:email},
success: function() {
alert("Success!");
}
});
return false;
}
</script>
PHP:
<?php
$from = "info#email.com";
$usersubject = "Thank You!";
$usermessage = "Thank you for signing up!";
$to = $_POST['email'];//one that assigned to data in ajax
$subject = "Form Info";
?>
<?php
$name = $_POST['uname']; //one that assigned to data in ajax
$email = $_POST['email'];//one that assigned to data in ajax
$message = "Name: $name
Email: $email";
$headers = "From:" . $from;
//mail($to,$subject,$message,$headers);
mail($email,$usersubject,$usermessage,$headers);
echo 'Success';
?>