2

I am trying to capture the Enter key as follows,

$("#txt1").keypress(function(event){

 if(event.which==13) //Also tried using event.keycode
  $("#add").load("newjsp.jsp?q="+this.value)
})

But everytime I press enter, The text gets erased and does not show in the form(#add) it should. How can I do this?

Also I encountered a problem in the following code,

     $("#txt1").keyup(function(event){

             $("#add").load("newjsp.jsp?q="+this.value)
        })

<form> 
    Comment: <input type="text" id="txt1"></input>
 </form>
        <p><p></p></p>
           <form id="add">
           </form>

When I run this code, the text in the textbox gets added to my form (#add) but as I press the spacebar key, the text is erased (from the #add form and not from the textbox) and then no more text is added. I have tried using keydown and keypress but same problem remains. I cannot understand where the problem lies since this.value gives me the complete value in the textbox! Including the spaces.

3 Answers 3

2

Your first example is the correct one. Except you need to prevent event bubbling after you press 'enter'. Pressing enter by default submits the form. FinalFrag is correct about the spaces

$('#txt1').keypress(function(e){
    if (e.which===13) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $("#add").load("newjsp.jsp", {q: $(this).val()} );
    }
});

*Editied to reflect Tomalak's comment.

1
  • 2
    Better: $("#add").load("newjsp.jsp", {q: $(this).val()} );
    – Tomalak
    Sep 23, 2011 at 12:32
2

this.value will indeed add the pressed key to the load request. However, your browser might trim the spaces off the requested url turning "q=hello " into "q=hello"

You should escape the value before you use it in the request.

Take a look at the javascript escape() function here: http://www.w3schools.com/jsref/jsref_escape.asp

3
  • @Final: escape() is absolutely wrong. Use encodeURIComponent().
    – Tomalak
    Sep 23, 2011 at 12:36
  • Thanks dude!...it works great now. So was it that my browser couldn't umderstand or interpret the text properly i.e with spaces? Because when I wrote the same code in javascript it used to work fine without escaping it. Using innerHTML it would overwrite the previous contente with the existing content.
    – Rishabh
    Sep 23, 2011 at 12:37
  • 1
    @Rishabh: stackoverflow.com/questions/75980/…
    – Tomalak
    Sep 23, 2011 at 13:24
0

For the second problem you should use encodeUricomponent() to encode the values so that you can use them in a url:

 $("#txt1").keyup(function(event){

         $("#add").load("newjsp.jsp?q="+encodeURIComponent(this.value));
    })

For the first problem you should prevent the default action and stop the propagation:

$('#txt1').keypress(function(e){
    e.preventDefault();
    e.stopImmediatePropagation()
    if (e.which===13) {
        $("#add").load("newjsp.jsp?q=" + $(this).val());
    }
});
1
  • This code to capture the Enter key does not work, I am not able to enter text in the textbox.
    – Rishabh
    Sep 23, 2011 at 13:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.