How to capture enter key?

[Michael Hubele]

Hi

I currently have a textbox and a button on a page. When I click on the text box then enter a value and hit enter key it refreshed the page. I want it to click the button and not refresh the page.

How can I do this?

[Bear Bibeault]

You don't want to capture the key, you want to prevent the form from submitting. Add a submit handler for the form that returns false.

$('#myForm').submit(function(){ return false; });    

[Michael Hubele]

Originally posted by Bear Bibeault:
You don't want to capture the key, you want to prevent the form from submitting. Add a submit handler for the form that returns false.

$('#myForm').submit(function(){ return false; });    

This does not seem to be working. Like when I click on the button it does not sumbit anything. But when I click in the textbox and then hit the enter key I get a refresh back.

I am not sure what to really show you code wise. I am not sure if this is because asp.net or something else.

edit

Ok my mistake for some reason asp.net changed the form id on generation so I was using the wrong id.

Now when I hit enter nothing happens. How can I associate it to a button so its the same as a user clicking the enter button?

Sort of like a default button.
[ June 20, 2008: Message edited by: Michael Hubele ]

[Bear Bibeault]

Right, what we've done is to block form submission. In the event handler you can check the target to see if the button initiated the submission and let it go through (by not returning false).

[Michael Hubele]

Originally posted by Bear Bibeault:
Right, what we've done is to block form submission. In the event handler you can check the target to see if the button initiated the submission and let it go through (by not returning false).

In what event Handler? the form handler? and how do I check?

[Bear Bibeault]

In the event instance passed to the submit handler, the target property will be a reference to the element that initiated the event.

[Michael Hubele]

Originally posted by Bear Bibeault:
In the event instance passed to the submit handler, the target property will be a reference to the element that initiated the event.

I am confused. Like if I use the return false that basically blocks the enter button from being used. How is adding a event handler going to help me?

So since the enter key is blocked that will never get run? I am not submitting anything to the server. So even when I click on the button(what is just a regular button) the $("#aspnetForm").submit() is never initated(and their not point this is not the problem).

I am just trying to get it so when the user gets to my flashcard page they see a text box, a image box and a button.

When the button is clicked it goes to its click method does stuff in there.

I just want to make it so they don't have to type there answer then move their mouse to the button and click on it. I want them to be able to use the enter key to click on the button and then that buttons click event gets launched.

What we have is good that it at least does not do a page refresh anymore but it seems to permanently taken out the enter key and when I even click on the button it does not even launch this submit code.

So I am not sure what I am doing wrong.

This is what I tried so far.

    
 $("#aspnetForm").submit(function(event)
    {
        if (event.keyCode == 13)
        {
            return true;
        }
        else
        {
            return false;
        }
    }); 

[Bear Bibeault]

Originally posted by Michael Hubele:

I am confused. Like if I use the return false that basically blocks the enter button from being used. How is adding a event handler going to help me?

The return of false from the submit handler is what blocks the form submission. But...

I am not submitting anything to the server... I am just trying to get it so when the user gets to my flashcard page they see a text box, a image box and a button.

So you never want to submit the form?

If not, then make sure that the button is not a submit button.

I just want to make it so they don't have to type there answer then move their mouse to the button and click on it. I want them to be able to use the enter key to click on the button and then that buttons click event gets launched.

Ah, that's not what I thought you were tryng to do initially.

OK, the submit handler that I posted will prevent the form from ever getting submitted (unless you call its submit() method), but that won't do anything to trigger your button click function.

For that, you'll need to add a keypress handler to the text field to check for the Enter key. When you detect it, you can trigger the button's click handler. If you've established the click handler with jQuery, you can trigger it by calling the click() method (with no params) after wrapping the button.
[ June 21, 2008: Message edited by: Bear Bibeault ]

[Michael Hubele]

Originally posted by Bear Bibeault:
Ah, that's not what I thought you were tryng to do initially.

OK, the submit handler that I posted will prevent the form from ever getting submitted (unless you call its submit() method), but that won't do anything to trigger your button click function.

For that, you'll need to add a keypress handler to the text field to check for the Enter key. When you detect it, you can trigger the button's click handler. If you've established the click handler with jQuery, you can trigger it by calling the click() method (with no params) after wrapping the button.

[ June 21, 2008: Message edited by: Bear Bibeault ]

My button is just a regular input button with type="button".

I am not sure where to put that code in the textbox. I got to events for it setup the blur event and click event.

Both don't seem to be the right place to put it. Like if I put it in the click even that mean the second I click on it that event will look at it and since the enter key has not been pressed it will never run.

Same with on blur that is only if they leave the event that gets fired.

So am I suppose to add another event?

and do you call it like this?

$("#startQuiz").click();


edit-

Ah I missed where you said keypress handler.

I been looking around and I see that it seems you need to test for firefox and ie keyevents? Is this correct?

function enterKey(e)
{
var key = e.which||e.keyCode;

if(key == 13) 
{
document.getElementById("btnSubmit").click();
}
}
 

I don't even know how this works. not sure how you can do a || statement in a variable like that. Or why you need to check for .which and a keycode.
[ June 21, 2008: Message edited by: Michael Hubele ]

[Michael Hubele]

Originally posted by Michael Hubele:
[QB]

My button is just a regular input button with type="button".

I am not sure where to put that code in the textbox. I got to events for it setup the blur event and click event.

Both don't seem to be the right place to put it. Like if I put it in the click even that mean the second I click on it that event will look at it and since the enter key has not been pressed it will never run.

Same with on blur that is only if they leave the event that gets fired.

So am I suppose to add another event?

and do you call it like this?

$("#startQuiz").click();


edit-

Ah I missed where you said keypress handler.

I been looking around and I see that it seems you need to test for firefox and ie keyevents? Is this correct?

function enterKey(e)
{
var key = e.which||e.keyCode;

if(key == 13) 
{
document.getElementById("btnSubmit").click();
}
}
 

I don't even know how this works. not sure how you can do a || statement in a variable like that. Or why you need to check for .which and a keycode.


Also I don't understand this. Is there something special in text boxes that cause post back automatically. If I don't have that original blocker in there and I hit the enter key. It will go and click the button and then refresh the page.

[Bear Bibeault]

Originally posted by Michael Hubele:
My button is just a regular input button with type="button".

Good. So the button click will not trigger a form submission. The Enter key in a field will do so in some circumstances; hence the submit handler that blocks it.

Bind a keypress handler to the text field.

I been looking around and I see that it seems you need to test for firefox and ie keyevents? Is this correct?

Not if you are using jQuery. It will normalize the event instance so you don't have to worry about IE's nonsense.
[ June 21, 2008: Message edited by: Bear Bibeault ]

[Michael Hubele]

Originally posted by Bear Bibeault:
Not if you are using jQuery. It will normalize the event instance so you don't have to worry about IE's nonsense.

[ June 21, 2008: Message edited by: Bear Bibeault ]

Jquery is so sweet

Oh and firebug rocks too. I love its debugger, console.log and especially how you can change your CSS right on the spot. Before I had to write some CSS test it to see if it at the spot I want it. If not rerun the app and then test again.

Now its just oh I will change the CSS right there in code and move it to the spot I want then copy that code into my Style sheet.

[Michael Hubele]

I think I need to actually use what you first thought I was talking about.

I am trying to do the ajax but I am not sure how to really do it yet but I am pretty sure I have to change the value from true to false to let it through.

Like I have a save button now(I made this a type="submit"). The user enters in some values in textboxes and then hits the save button.

In my submit button I have this.

    
 
 $("#btnSave").click(function(event)
    {
        $.post("FlashCardQuiz.aspx.cs", "test");
    });
 

But remember I have also this in my code:

    
 
    $("#aspnetForm").submit(function(event)
    {
        return false;
    });

So do I now have to call this method from my btnSave click and change it to true?

Or can the ajax go through without it?

P.S

I know this is html/javascript but when your doing jsp and php are there anything special you need to do to capture the values on the server side.

I am not sure how I will grab that test value using C# code. I am not sure if I need to use anything special for it.

[Bear Bibeault]

If you don't want the form to be submitted as a fill-page reload, why did you change your button to a submit button?

[Michael Hubele]

Originally posted by Bear Bibeault:
If you don't want the form to be submitted as a fill-page reload, why did you change your button to a submit button?

This is a new button that is going to be saving data and sending it through ajax to the server. So don't I need to have it go through?

[Bear Bibeault]

The easiest way to re-route a form through Ajax is to grab the jQuery Form plugin and use its ajaxSubmit() method.

[Michael Hubele]

Originally posted by Bear Bibeault:
The easiest way to re-route a form through Ajax is to grab the jQuery Form plugin and use its ajaxSubmit() method.

Have I done something wrong?

    
    $(function()
    {
 
        $('#form1').submit(function()
        {
            // submit the form 
            $(this).ajaxSubmit();
            // return false to prevent normal browser submit and page navigation 
            return false;
        });
       
 
        $("#submit").click(function(event)
        {
 
            $.post("Default.aspx", { SendMe: "send" });
        });
    });
 

When I do this it goes to my server and does the code twice(my server side code).
[ June 23, 2008: Message edited by: Michael Hubele ]

[Bear Bibeault]

Do the submit or do the click handling yourself. Not both.

[Michael Hubele]

Originally posted by Bear Bibeault:
Do the submit or do the click handling yourself. Not both.

So do one or the other?

If I did just the submit then how would I send along this?

$.post("Default.aspx", { SendMe: "send" });

[Bear Bibeault]

Make Default.aspx the action of the form, and embed a hidden input to contain the request parameter.

The whole point of ajaxSubmit() is that you set up the <form> just as if you were going to submit the form normally, and it re-routes it as an Ajax request.

You might also want to check out ajaxForm() which sets up the form as such without you having to even declare the submit handler.
[ June 23, 2008: Message edited by: Bear Bibeault ]

[Michael Hubele]

Originally posted by Bear Bibeault:
Make Default.aspx the action of the form, and embed a hidden input to contain the request parameter.

The whole point of ajaxSubmit() is that you set up the <form> just as if you were going to submit the form normally, and it re-routes it as an Ajax request.

You might also want to check out ajaxForm() which sets up the form as such without you having to even declare the submit handler.

[ June 23, 2008: Message edited by: Bear Bibeault ]

I don't understand what I have to do. I am not sure how to make Default.aspx the default action of the form.

Could I see an example of how the jquery + html should be looking?

[Bear Bibeault]

<form id="myForm" action="Default.aspx">
  <input type="hidden" name="SendMe" value="send"/>
</form>    

$('#myForm').submit( function(){ $('#myForm').ajaxSubmit(); } );    

[Bear Bibeault]

or, just put this in the ready-handler:

$('#myForm').ajaxForm();    

and it will handle everything.
[ June 23, 2008: Message edited by: Bear Bibeault ]

[Michael Hubele]

Originally posted by Bear Bibeault:
or, just put this in the ready-handler:

$('#myForm').ajaxForm();    

and it will handle everything.

[ June 23, 2008: Message edited by: Bear Bibeault ]

The way I am doing it with the $.post is it alot harder?

I just curious because I would like to see both ways done.

I have not tried your way yet. I am just wondering if I needed to make a special hidden field just to make that work how would it work when I have to grab all the values out of every selected checkbox?

Or would it just be writing a the jquery selector to grab those and just send it along like normal?

[Bear Bibeault]

The beauty of ajaxSubmit() and ajaxForm() is that they will automatically marshal and encode the request params for you. You don't have to do anything on your own. The submission will act just like a "normal" form submission, except that it will be made via Ajax rather than a full-page reload.

So, yeah, easier that $.post() because it does the form field gathering for you.

[Michael Hubele]

Originally posted by Bear Bibeault:
The beauty of ajaxSubmit() and ajaxForm() is that they will automatically marshal and encode the request params for you. You don't have to do anything on your own. The submission will act just like a "normal" form submission, except that it will be made via Ajax rather than a full-page reload.

So, yeah, easier that $.post() because it does the form field gathering for you.

So if I put my checkboxes in a form and then post it it will gather all that for me?

You don't know asp.net and C# by any chance? I am finding it so hard to figure out how to handle the request. once sent to the server. No one sees to know they just know how to drag and drop a update panel on the page

edit

The problem I am having with my $.post() is that it seems to go to the server and the server grabs it but nothing is ever printed back out.

Could maybe do this for me?

just write a button that is a submit handler and that sends a hardcoded value when clicked using the post method?

Maybe I am doing something wrong with my code.

$(function()
{
$("#submit").click(function(event)
{
$.post("Default.aspx",{test: "myvalue"});

});
});

Like in my server code I got this:

protected void Page_Load(object sender, EventArgs e)
{
if (Request.HttpMethod == "POST")
{
Label1.Text = Request["test"];
}
}

but my label never gets changed even though my debugger says it changed(like a new value goes into it)

If I change the .click to .submit

I get a different story. My Request finds nothing but the label gets updated with null.
[ June 23, 2008: Message edited by: Michael Hubele ]

[Bear Bibeault]

Originally posted by Michael Hubele:
So if I put my checkboxes in a form and then post it it will gather all that for me?

Exactly, everything will be submitted to the server just as if it were a "normal" form submission.

You don't know asp.net and C# by any chance?

Nope, sorry. (No interest in such technologies.)
[ June 23, 2008: Message edited by: Bear Bibeault ]

[Michael Hubele]

how would the checkboxes be packaged? would they all come invidually or as an array?

On a side note how would you pass an array to the server? could you do that? how the heck would extract the values out of the array?

[Bear Bibeault]

Originally posted by Michael Hubele:
how would the checkboxes be packaged? would they all come invidually or as an array?

Individually. HTTP has no concept of an array.

Be aware that unchecked checkboxes are ignored during form submission.

On a side note how would you pass an array to the server?

An array of what? Most often, multiple elements will be passed to the server by creating multiple form elements with the same name. Most server-side web containers make these easy to gather as an array. (No, I don't know how in ASP/C# -- in Java, it's a single method call).