jQuery AJAX submitting not working

Question

I'm having trouble with a jquery ajax submit form. Here's the jquery code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            var number = $("#number").val();
            var machine_id = $("#machine_id").val();
            var dataString = 'number='+ number + '&machine_id=' + machine_id;
            $.ajax({
                type: "POST",
                url: "http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php",
                data: dataString,
            });
            return false;
        });
    });
</script>

and here is the form code:

<form name="form" method="post" action="">
    <input type="hidden" id="machine_id" name="machine_id" value="5">
    <input type="text" id="number" name="number"></input>
    <input class="btn btn-small btn-success" type="submit" class="submit" id="submit" name="submit" value="submit">Submit</input>
</form>

And the code of updatetextdatabase.php:

    <?php
date_default_timezone_set('America/New_York');//set time zone
$con=mysqli_connect('saslaundry.db.10410357.hostedresource.com', 'saslaundry', 'password', 'saslaundry');//establish connection
// Check connection
if (mysqli_connect_errno())//ping database to check connection
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();//error message
  }
    mysqli_query($con,"INSERT INTO textrequests VALUES('$_GET[number]', '$_GET[machine_id]') ");
    return;
?>

But not only is it not submitting the form, the page also reloads, which is sort of what I was trying to avoid by using AJAX. I feel like the problem is that the function is not being called by the submit button, but I can't figure out why.

Thanks!

Answer 1

I made this working fiddle:

HTML:

<form name="form" method="post" action="">
<input type="hidden" id="machine_id" name="machine_id" value="5" />
    <input type="text" id="number" name="number" />
    <input class="btn btn-small btn-success" type="button" class="submit" id="submit" name="submit" value="submit" />
</form>

Jquery:

$(document).ready(function(){
$("#submit").click(function() {
        var number = $("#number").val();
        var machine_id = $("#machine_id").val();
        var dataString = 'number='+ number + '&machine_id=' + machine_id;
        $.ajax({
            type: "POST",
            url: "http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php",
            data: dataString

    });
});
});

Network Console:

Request URL:http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php
Request Headersview source
Accept:*/*
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://fiddle.jshell.net
Referer:http://fiddle.jshell.net/WJGhr/show/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)    Chrome/29.0.1547.66 Safari/537.36
Form Dataview sourceview URL encoded
number:25
machine_id:5

Here is the fiddle: http://jsfiddle.net/WJGhr/

Answer 2

try this one use e.preventDefault(); prevent your form to submit and then perform your ajax call

<script type="text/javascript" >
    $(function() {
        $(".submit").click(function() {
            e.preventDefault();
            var number = $("#number").val();
            var machine_id = $("#machine_id").val();
            var dataString = 'number='+ number + '&machine_id=' + machine_id;
            $.ajax({
                type: "POST",
                url: "http://www.onmsgmedia.com/hurryitUP/updatetextdatabase.php",
                data: dataString,
               success: function (data) {
                //do something here when you got the response
             }
            });

        });
    });
</script>

event.preventDefault