Question

I have been trying to submit a form with jquery ajax but have been having issues.
When i check through firebug i see the value posted but it shows error from the url. I have this html

<form method="post" name="tForm" id="tForm">
<table>
<tr>
<td>Age</td>
<td><input name="age" id="age" value="" /></td>
</tr>
<tr>
<td><input type="button" id="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>

My js file that submits the form has this piece of code

$(document).ready(function() {

$('#tForm').submit(function(){
var age = $('#age').val();
var msg ='';

$.ajax({
url:'testp.php',
type:'post',
data: {age:age},
beforeSend:function(){
alert(age);
},
success:function(data){
msg=data;
alert(msg);
},
complete:function(){
alert(msg);
}
})
})
});

My testp.php file just has this

<?php
echo 'ok';
?>

Answer 1

You need to stop the event from propogating. Your form attempts to submit in the standard method and since your form doesn’t have an action you receive the error.

$(document).ready(function() {

    $('#tForm').submit(function(){
    var age = $('#age').val();
    var msg ='';

    $.ajax({
    url:'testp.php',
    type:'post',
    data: {age:age},
    beforeSend:function(){
    alert(age);
    },
    success:function(data){
    msg=data;
    alert(msg);
    },
    complete:function(){
    alert(msg);
    }
    })
    return false;
    })
    });