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…

Answer 1

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