Geek asks and answers

JQuery.load and POST data

This is really frustrating, I would appreciate help on this. I have a div called comments and form inside this div. What I want to do is submit the form to the current page and load it inside the div without reloading the whole 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 send a message, a warning is triggered, but the page does not load. It works fine if I do this event as follows:

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

I do not like the publication of data. I used .load before but never sent data. I got the above code from the same forums.

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

, POST? !

EDIT: :

$("#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();
});

... comments.asp. div ( div?)

+3
3

, , .

$. post - $.ajax(. ).

$. load url <div> DOM (. ).

( !), , . $.load - . ( , -.)

$(#...) submit, . .

<form id="form_id">
...
<input type="submit" value="Submit">
</form>

: (1) HTML- ( AJAX), (2) ( ), $.post( $.ajax), (3) .val() ( - ) DOM- , (4) .submit( ). preventDefault, .

, #post DOM. ID, $(# form_id).submit(... , submit . a href= "http://api.jquery.com/submit/" rel= "nofollow" > .submit .

, <div> id 'comments' . , , , AJAX . , "id" .

+4

txtname. script , # ( id). id .

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

expascarello, . , , ajax. preventDefault

$(function(){
   $("#post").click(function(e) {
     e.preventDefault()
     alert("clicked");
        $("#comments").load("comments.asp", { 
         'name': $("#wysiwyg").val(), 
         'tel': $("#txtname").val()
        });
  });
});
+1

You do not cancel the button click so that the form submits and reloads the page.

$("#post").click(function(evt) {
    evt.preventDefault();
    ...

jQuery event.preventDefault ()

The load () method executes the get command, not the message.

0
source

More articles:


All Articles