Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Submit a form using jquery without navigating to another screen

Tags:

jquery

forms

I'm trying to make it so that a form submit doesn't cause the page to navigate and use ajaxSubmit to submit the content. however when I click the submit button, it still navigates to the page in the action attribute of the form. Heres the javascript:

var options = {
    success: processLogin
};
$('#loginform').submit(function() {
    $(this).ajaxSubmit(options);
    return false;
});

and heres the form:

<form id='loginform' action='login.php' method='post'>
    <table id='logintable'>
        <tr>
            <td>Room:</td>
            <td><input id='roomname' type='text' name='roomname' /></td>
        </tr>
        <tr>
            <td>Nickname:</td>
            <td><input id='nickname' type='text' name='nickname' /></td>
        </tr>
        <tr>
            <td colspan='2' class='center'><input type='submit' value='Submit' /></td>
    </table>
</form>
like image 476
The.Anti.9 Avatar asked Apr 28 '09 22:04

The.Anti.9


1 Answers

Use event.preventDefault()

$('#loginform').submit(function(e) {
    e.preventDefault();
    $(this).ajaxSubmit(options);
});
like image 135
andi Avatar answered Nov 12 '22 03:11

andi