Question

189

Jquery .load and POST data

rated 0 times [ 194] [ 5] / answers: 1 / hits: 22718 / 12 Years ago, sun, april 15, 2012, 12:00:00

This is really frustrating I would appreciate some help with this. I have a div, called comments and a form inside of that div. What I want to do is post a form to the current page and have it load inside of the div without reloading the entire thing. Here is my current code:

<div id=comments>

<form action=# method=post onsubmit=return false; >

<input type=hidden name=txtname value=test>

<textarea id=wysiwyg name=wysiwyg rows=5 cols=50></textarea>

<input type=submit name=post id=post value=Submit>

</form>

<script type=text/javascript>

EDIT: Read edit below for current code

</script>        

</div>

When I submit, the alert fires, but the page does not load. It works fine if I make the event as follows:

$(#comments).load(comments.asp);

It's not liking the posting of data. I have used .load before but never to post data. I got the above code from these very same forums.

I'm honestly not sure of the purpose of 'name' and 'tel' - do I refer to those variables or the form variable names when processing the code? This is in ASP classic.

What's wrong with the above code, how can I get it to send data from the forum via POST? Thanks!

EDIT:
I am now using the following code:

$(#post).submit(function(event){

    var $form = $(this),

        $inputs = $form.find(input, select, button, textarea),

        serializedData = $form.serialize();

    $inputs.attr(disabled, disabled);



    $.ajax({

        url: /comments.asp,

        type: post,

        data: serializedData,

        success: function(response, textStatus, jqXHR){

            console.log(comment posted);

        },

        error: function(jqXHR, textStatus, errorThrown){

            console.log(



                textStatus, errorThrown

            );

        },

        complete: function(){

            // enable the inputs

            $inputs.removeAttr(disabled);

        }

    });



    event.preventDefault();

});

And now it's using properly getting the form handled...however it goes to comments.asp. How can I make all the action happen in a certain div (comments div?)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

elvisissacg

Add To Favorites

Follow

Total Points: 410

Total Questions: 108

Total Answers: 121

Location: Monaco

Member since Tue, Jun 16, 2020

4 Years ago

answered 12 Years ago quentinaveryb · Accepted Answer

It seems to me you are blending a bunch of different techniques in a way that is not entirely coherent.

$.post is a shortened version of $.ajax (see here).

$.load takes a url and sticks it into a <div> or other DOM Element (see here).

If I understand it correctly (and I may not!), you're not really wanting to load the form, but put values into the form fields. $.load is an odd way to do this. (It may work, but I do it another way.)

If you're using $(#...).submit, you can also leave out a whole bunch of stuff in your form. The following should work fine.

<form id=form_id>

...

<input type=submit value=Submit>

</form>

My method is: (1) have a hardcoded HTML form (or build it by AJAX), (2) get the values from the DB (or wherever) using $.post (or $.ajax), (3) stick the values into the form using .val() (or equivalent - whatever is right for the input type) and the DOM id of that input, and then (4) use .submit (in a manner similar to yours). You will need to add preventDefault as the others have suggested.

You're also muddying the waters using #post as the DOM id. You really want to give the form itself the ID, and then use $(#form_id).submit(... I can't test it now, but having the submit on the input field may cause some grief. The official example attaches the .submit to the form id.

I'm also not sure the <div> with id 'comments' really does much. I have a container id like your 'comments', but that's because I build forms by AJAX and stick them into the container. If you don't need to do that, the id 'comments' is unnecessary to the whole procedure.