Jquery .load and POST data
asp-classic, html, javascript, jquery, web
Solution
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.
Problem
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?)