Stay on page after submit form - php

Question

The goal is that once a the submit button is clicked, instead of going to send.php, it will just keep the page, I don't even want the page reloaded. If you guys have another way of doing this, that would be perfectly fine too.
My Ajax code
$("#sendtxt").click(function(e) {
e.preventDefault();
var phonenum = $("#phonenum").val();
var provider = $("#provider").val();
var message = $("#message").val();
$.ajax({
type : 'POST',
data : dataString,
url : 'send.php',
success : function(data) {
alert(data);
}
});
});
My Form code
<form name="reqform" action="" method="post">
<h1>Phone Number:
<input name="phonenum" id="phonenum" type="text" class="txtbox-style" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" required/>
<select name = "provider" id ="provider" class="txtbox-style" required>
<option value="#sms.mycricket.com">Cricket Wireless</option>
</select>
<br/>
Message:
<input name="message" id="message" type="text" class="txtbox-style"/>
<br/>
How many times?
<input name="amount" id="amount" type="number" min="1" max="20" class="txtbox-style" required/>
<br />
<input type="submit" id="sendtxt" name="sendtxt" class="btn-style" value="Start Sending" />
</h1>
</form>
My send.php
<?php
$to = $_POST["phonenum"];
$provider = $_POST["provider"];
$subject = 'Hi';
$message = $_POST["message"];
$headers = 'From: Hello' . phpversion();
mail($to . $provider, $subject, $message, $headers);
?>

Answer 1

Your data attribute wasn't correct, there was nothing being sent. You can try it like this, this will work:
You have to have jQuery included in your page, you can do this with this line and place it above your script:
<script>
$(document).ready(function(){
$('input[name="phonenum"]').keyup(function(e) {
if (/\D/g.test(this.value)) {
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
$("#sendtxt").click(function(e) {
e.preventDefault();
var phonenum = $("#phonenum").val();
var provider = $("#provider").val();
var message = $("#message").val();
$.ajax({
type : 'POST',
data : {
provider : provider,
// ^key that appears in post
message : message,
// ^var you fetched before from the input
phonenum : phonenum
},
url : 'send.php',
success : function(data) {
alert(data);
console.log('Success');
},
error : function(xhr, err) {
console.log("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
console.log("responseText: " + xhr.responseText);
}
});
});
});
</script>
EDIT:
Check your console for errors (F12 in chrome), if there's an error, it will look like this, or similar:
If ajax succeeds, there will be at least "Success"
ANOTHER EDIT:
Put your form out of the <h1> tag, use it like this:
<h1>Phone Number:</h1>
and delete the </h1> at the end of your form...

Answer 2

I prefer binding form's submit event (Because user may hit enter on focused <input> element, not submitting by clicking <input type="submit">), additionally there is an easier data colletion approach:
$("form").submit(function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
data : $(this).serialize(),//Here we collect all entered data
url : 'send.php',
success : function(data) {
alert(data);
}
});
});

Answer 3

I think that the best Approach is to use the jquery $.post method
$("form").submit(function(e) {
e.preventDefault();
$.post('send.php', $( this ).serialize()).done(function(data){
alert(data);
});
}
http://api.jquery.com/serialize/
http://api.jquery.com/jQuery.post/
** update **
example js fiddle:
http://jsfiddle.net/de71ju0r/1/