Preventing a form from submitting on ENTER


#1

Hi - I have the following problem: my app has a form that acts as a
filter to a table on the page, so that the user can search any value in
the table (via text box) or use select lists for more specific search.
The form is being observed by an observe_form helper that runs every 1-2
seconds or so. It’s all still in testing.

I noticed that when I hit return while in the textbox, the form posts
and redirects me to an action unknown page. I want to remove that
functionality so that hitting enter wont do anything – any idea how to
do it?

Thanks


#2

How about removing form tags - just have the field and the observe_field
… this might not be valid html - not sure about that.

Ivor

On Mon, Dec 29, 2008 at 12:21 PM, sa 125


#3

Ivor P. wrote:

How about removing form tags - just have the field and the observe_field
… this might not be valid html - not sure about that.

<?xml version="1.0" encoding="UTF-8"?> untitled
Test

The above code passes the W3C validator for XHTML 1.0 Strict and XHTML
1.1. Notice that the

surrounding the and was
necessary to pass XHTML Strict, but was not required for XHTML 1.0
Transitional. Other surrounding tags besides
work as well, but the
and tags must be contained by something.

Example (this is INVALID!):

<?xml version="1.0" encoding="UTF-8"?> untitled Test

W3C Validator:
Line 10, Column 19: document type does not allow element “label” here;
missing one of “ins”, “del”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “p”,
“div”, “address”, “fieldset” start-tag.


#4

I believe if you put a textarea in your form, the browser will not
submit
the form if you hit the enter key. It depends on which browser you are
using
though.

On Mon, Dec 29, 2008 at 11:18 AM, Robert W. <


#5

Using and developing exclusively for firefox – one of the benefits of
building a site that’ll only be run in an office intranet :slight_smile:

I’ll give those a try - thanks.


#6

Create a form without a submit tag. Put in another control on the
web page that does $(‘id_of_my_form’).submit(); using a javascript
onclick event or whatever.

Regards,
Mukund


#7

lucky you :slight_smile: kudos to the staff for all using firefox

On Tue, Dec 30, 2008 at 11:26 AM, sa 125


#8

You can add Javascript to check for the value of the key pressed and
ignore it if it is the Enter key. I had to do the exact same thing for
the Backspace key not long ago, which was working as the Back icon in
some instances.

I have a sample but not here. I could give it to you if you still need
it tonight when I get home.

Pepe


#9

pepe wrote:

You can add Javascript to check for the value of the key pressed and
ignore it if it is the Enter key. I had to do the exact same thing for
the Backspace key not long ago, which was working as the Back icon in
some instances.

I have a sample but not here. I could give it to you if you still need
it tonight when I get home.

Pepe

document.onkeypress = function(e) {

if (e.keyCode == 13) {

return false;
}

key code value is 13 for “Enter”
if you give return false,
it will disable the default property of Key.


#10

form_for results in a POST operation. You are checking for
request.xhr? in your controller to render the partial. Use
remote_form_for instead to get a XHR request.

Pressing an enter key in a text field doesn’t submit a form. The tags
don’t add that in.

Regards,
Mukund

On Jan 7, 4:15 pm, Shilo A. removed_email_address@domain.invalid


#11

Mukund wrote:

Create a form without a submit tag. Put in another control on the
web page that does $(‘id_of_my_form’).submit(); using a javascript
onclick event or whatever.

Regards,
Mukund

Actually, the form doesn’t have a submit tag in it, but 2 selection
lists and a text field (it’s a search/filter form). The submission
happens when you hit enter whilst inside the text field – I think it’s
something most people do when searching something > think of every visit
you made to a search engine’s page… Rails form_for might have this
built in, since it immediately looks for ‘create’ action when hitting
enter inside the text field.

I thought about simply redirecting it to the same action that filters
the form (which is actually called via observe_form tag nearby). I’m
very new to rails, so I’m not sure how to call the action while
retaining the same view. Here’s a brief rundown of my code:

view

<% form_for :person, :html => { :id => ‘people_form’ } -%>
<%= f.select :id, @people.collect {|p| [p.name, p.id]} %>
<%= f.select :gender, [[‘Male’,‘M’],[‘Female’,‘F’]] %>
<%= f.text_field :search, :size => 20 %>
<% end -%>

<%= observe_form :people_form, :frequency => 2, :update =>
‘people_table’,
:url => { :action => ‘search_form’, :only_path => false
} %>

<%= render :partial => 'person' %>

controller

def search_form
#… get all search params and store in cond
@people = Person.find(:all, :conditions => cond)
render :partial => ‘person’ if request.xml_http_request?
end

How would I call the search_form function on form submit resulting in
the same view being rendered (similar to what observe_form does)? I
tried adding :action => ‘search_form’ to the form_for tag, but it then
looks for a view of the same name…


#12

Mukund wrote:

form_for results in a POST operation. You are checking for
request.xhr? in your controller to render the partial. Use
remote_form_for instead to get a XHR request.

Pressing an enter key in a text field doesn’t submit a form. The tags
don’t add that in.

Regards,
Mukund

I changed the form_for to remote_form_for, and this disabled the search
for the new view - Thanks. Using firebug I still see it’s getting a 404
error when I hit enter in the text field. so I’m not sure what’s
submitting the form on enter…

Also, I’m afraid I’m not sure what you mean with the XHR part - should I
just change
render :partial => ‘person’ if request.xml_http_request?
to
render :partial => ‘person’
now that remote_form_for submits an ajax request?

Thanks for your help!