Question

I am using the.load function and I am having some trouble:

<form id="register_frm" method="post" action = "/login/register/"> 
    <fieldset>
        <legend>New User:</legend> 
        <div>
        <label for="id_email">Email</label>
        <input id="id_email" type="text" name="email" maxlength="30" /> 
        </div>      
        <div> 
        <label for="id_conf_email">Confirm Email</label> 
        <input id="id_conf_email" type="text" name="conf_email" maxlength="30" /> 
        </div> 
    </fieldset> 
<input name = "register" type="submit" value="Register" /> 
</form>

I am trying to write a .load script that would display a success method if the 2 email address match.

function register_js() {
    $('#register_frm').load('/register/confirm');
    return false;
    }

$(document).ready(function () {
    ('#register_frm').submit(register_js);
    });

1. How to change the code so the .load would submit a post request instead of the get?
2. When I override the register button, how to make the .load submit the email and conf_email field so that I can verify them on the server side?

Answer 1

You don’t want to use load you want to use post.

$(document).ready(function () {
    $('#register_frm').submit(function() {
        var $form = $(this);
        // if you want to get the url from the action use
        // var url = $form.attr('action');
        var url = '/register/confirm';
        $.post( url, $form.serialize(), function(html) {
            $form(html);
        });
        return false;
    });
});

Note if you don’t reuse the $form variable as noted in the comments, you can simply use $(this).serialize() in the parameters to post.