jQuery email has no text/submits twice - php

Question

I am trying to simply send an email to a hardcoded email address as a function of a report bug button. However, the text I try to input to the php file that sends the email wont transmit through, and the email function in my javascript file is sending two emails at once. Not sure why either of these are happening.
Here is all my code pertaining to the email function.
Bug page (HTML)
<div data-role="page" id="bug">
<div data-role="header" data-position="fixed">
<h4>Submit a bug</h4>
</div>
<div data-role="content">
<textarea name="textarea" id="textarea"></textarea>
Send
<script language="javascript" type="text/javascript">
$("#send").click(function(){
email();
});
function clearText()
{
$('textarea#textarea').val('');
}
</script>
</div><!-- /content -->
</di> <!-- /bug -->
The above page is called when a user hits the "report bug button", which looks like this:
Report bug
Javascript file with email function:
function email(){
var name = "Joey";
var email = "example#gmail.com"
var vardata = $("textarea").val();
$.ajax({ type: "POST", url: "email.php", data: vardata, success: function() {
alert("Your bug report was sent!");
}
});
return false;
}
and my PHP file that is called:
<?php
$message = $_POST["vardata"];
mail("example#gmail.com", "Mystery person", $message);
?>
If the $message field is hardcoded in, I can get text in the emails just fine, but it can't grab it from the vardata tag. Also, it submits twice, as you can see here. Just click the report bug button and hit send.

Answer 1

When you send data to PHP through jQuery's ajax method, it's helpful to make it a JSON object, so you can get the values you need from the $_POST array in your PHP.
For example:
var name = "Joey";
var email = "example#gmail.com"
var vardata = $("textarea").val();
$.ajax({
type: "POST",
url: "email.php",
data: {name:name, email:email, vardata:vardata},
success: function() {
alert("Your bug report was sent!");
}
});
In this way, you can get the data in your PHP code like this:
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['vardata'];

Answer 2

In your PHP file you are getting the $_POST["vardata"], but in your javascript the field is called data. So use $_POST["data"] instead.

Answer 3

while analyzing the console panel it seems there are two ajax calls made this is because id="send" has a click event attached twice
So here is the trick to do first unbind all the click events on id="send" anchor then attach the click event which will resolve the twice email problem
$(document).ready(function(){
$("#send").unbind("click");
$("#send").click(function(){
email();
});
});

Answer 4

You need to send the data to the server with a name:
$.ajax({ /* ... */, data: {vardata: vardata}});
As for the double sending, you are wiring the click event twice, although I do not see where the second event is wired, but I suspect that it is autogenerated and then thrown away once.
You can see events wired by calling jQuery._data($("#send")[0], "events"); in your debug console. Two events are wired and both handler functions are identical (they call email();).