Strange issue with ajax POST

Question

I have this html page with the form

 <form  method="post" id="form1" name="form1" action="/status_comment/save">
 //Some text inputs
 <input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >
 </form>

And this is my javascript function to do the POST call

 function post_comment(event,item_id)
    {
     var keyCode = ('which' in event) ? event.which : event.keyCode;
     if(parseInt(keyCode)==13 && event.shiftKey!=1)
     {
       var str = $('#form1').serialize(); // Gets all the filled details
       $.post('/status_comment/save',
       str,
       function(data){
       alert(data);
       });
    }}

Backend is done using Django and this is the return statement

data=simplejson.dumps(data)
return HttpResponse(data, mimetype='application/json')

The referral url is say "/xyz".

The thing is, after the form gets submitted, it is being automatically redirect to the "/status_comment/save" page instead of remaining on the same page. I tried the get method and it works fine but not the POST method.

I tried debugging it, so changed the url in post call to the referral url, then it refreshs the page instead of doing nothing.

Also the alert() command inside the function above doesnt work, so its probably not being entered into.

Interesting thing I have noticed, when looking at the web developer console, the Initiator for the POST call in this page is being displayed as "Other" while the initiator for GET call and POST call (in other pages, where its working) is "jquery-1.8.0.min.js:2"

Any thoughts? Thanks...

You have to stop the form from submitting, show your form submit handler. — Musa, Jan 26 '13 at 17:59
Check it out: [http://stackoverflow.com/questions/5004233/jquery-ajax-post-example][1] [1]: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example — Marjan Nikolovski, Jan 26 '13 at 18:05

cwallenpoole · Accepted Answer · 2013-01-26T18:41:10.323

First you really shouldn't try to capture the enter if you can avoid it. Use the submit binding. It makes everything more obvious and easier for your fellow developers (I bet I am not the only one who thought "What the heck is KeyCode 13?").

I'm wondering if perhaps being more explicit might help. Have you tried calling preventDefault and stopImmediatePropagation?

$('#form1').submit(function(evt) {
    evt.preventDefault();
    evt.stopImmediatePropagation();
    // serialize and be AJAXy yada yada yada

If that doesn't work, or for some reason you prefer to handle capturing enter on your own, then you might want to have the above code in addition to your keydown handler. So it would be:

<input type="text" name="new_comment" id="new_comment" onkeydown="post_comment(event,'13')" >

...

$('#form1').submit(function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
}

function post_comment(event,item_id)
{
    event.preventDefault();
    event.stopImmediatePropagation();
  var keyCode = ('which' in event) ? event.which : event.keyCode;
  if(parseInt(keyCode)==13 && event.shiftKey!=1)
  {
    var str = $('#form1').serialize(); // Gets all the filled details
    $.post('/status_comment/save',
    str,
    function(data){
      alert(data);
    });
  }
}

Darin Dimitrov · Answer 2 · 2013-01-26T18:26:40.660

0

Start by getting rid of the onkeydown attribute from the input:

<form method="post" id="form1" name="form1" action="/status_comment/save">
    //Some text inputs
    <input type="text" name="new_comment" id="new_comment" />
</form>

And then simply subscribe to the .submit() event of this form using jquery and perform the AJAX request in there. Don't forget to return false from it to ensure that the default action is canceled and the browser stays on the same page:

$('#form1').submit(function() {
    var str = $(this).serialize(); // Gets all the filled details
    $.post(this.action, str, function(data) {
        alert(data);
    });
    return false; // <!-- that's the important part
});

edited Jan 26 '13 at 18:26

answered Jan 26 '13 at 18:04

Darin Dimitrov

1,023,142
271
3,287
2,928

Did you use the exact code shown in my answer? Did you remove the `onkeydown` attribute from your input? Did you remove the `post_comment` function shown in your question? All you need to do is to subscribe to the `submit` event of the form as shown in my answer. You don't need to be doing any keydowns or whatever you were doing initially. I have updated my answer to illustrate how your code should look like. – Darin Dimitrov Jan 26 '13 at 18:22

Strange issue with ajax POST

2 Answers2