question about .load jQuery function

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

How to change the code so the .load would submit a post request instead of the get?
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?

tvanfosson · Accepted Answer · 2011-03-19 15:49:50Z

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.

edited Mar 19, 2011 at 15:49

answered Mar 19, 2011 at 12:33

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rami_H Over a year ago

I am using a .load function because I am returning a "success message" that should be displayed instead of the register_frm section of the webpage. Is this possible withe $.post?

tvanfosson Over a year ago

@Rami - yes, post can receive html, json, etc. You just need to specify the type if it's not html. If it is, just use the html method on the jQuery object for the form to replace it's contents or use replaceWith to replace the form entirely (probably better, but not shown in my updated example).

tvanfosson Over a year ago

@Rami - FWIW, both load and post are simply convenience functions for the ajax method. load is essentially an ajax call using GET semantics where the success callback puts the content in the element to which load is applied. post, obviously, uses POST semantics and leaves it up to you to supply the callback, which can easily insert any new content delivered from the server.

Rami_H Over a year ago

thank you for the insights and the answer, This helped me put things into perspective and better understand how to use jquery tools.

Collectives™ on Stack Overflow

question about .load jQuery function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related