提交表格后留在页面上

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 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/

Answer 3

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);
        }
    });
});