views:

578

answers:

2

I have an html form and within the form I have a <button> element. I am using jquery to redirect the page upon clicking the button (essentially I wanted to nest form elements but since its not valid xhtml I used a javascript workaround).

Furthermore, clicking the button grabs text from an input field, appends it to the query string then redirects the page (note that both the input field and the button are inside of the html form).

Now for what I want to do: I also want to have the same functionality when the user hits the 'enter' key from within the previously mentioned input field (i.e. same functionality as if the <button> was pressed. I have already written code that binds to the enter key (when I press enter in the input field I can get an alert to pop up). The problem is that since this input field is within <form> tags, I cannot seem to override the default action which is: upon pressing enter trigger the submit button. Is it even possible to override this and have the pressing enter event redirect the page to something other than whatever <form action is set to? Thanks.

+1  A: 

This would really go against accessibility, but I think you could cancel the default action which is on the 'submit' event, with:

$('form#foo').submit(function(e) { e.preventDefault(); });

If I'm understanding correctly... or program that function to be dynamic and have it submit or not submit depending on a factor/flag.

meder
well this might work, but I still wan the default action to occur for the other form elements (I am simply trying to simulate a nested form)
es11
You'd have to specify the 'submit' on your one specific form, not the rest.
meder
+2  A: 

Try

$('form').submit(function () {
    return false;
});
RaYell
worked perfectly, thanks
es11