Forum: Ruby on Rails Preventing a form from submitting on ENTER

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
sa 1. (Guest)
on 2008-12-29 12:21
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
Ivor P. (Guest)
on 2008-12-29 15:58
(Received via mailing list)
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
Robert W. (Guest)
on 2008-12-29 18:18
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"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>untitled</title>
</head>
<body>
  <div>
    <label for="test">Test</label><input type="text" name="test"
value="" id="test" />
  </div>
</body>
</html>

------------

The above code passes the W3C validator for XHTML 1.0 Strict  and XHTML
1.1. Notice that the <div> surrounding the <label> and <input> was
necessary to pass XHTML Strict, but was not required for XHTML 1.0
Transitional. Other surrounding tags besides <div> work as well, but the
<label> and <input> tags must be contained by something.

Example (this is INVALID!):
------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>untitled</title>
</head>
<body>
  <label for="test">Test</label><input type="text" name="test" value=""
id="test" />
</body>
</html>

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.
------------------
James E. (Guest)
on 2008-12-29 20:19
(Received via mailing list)
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. <
sa 1. (Guest)
on 2008-12-30 11:26
Using and developing exclusively for firefox -- one of the benefits of
building a site that'll only be run in an office intranet :)

I'll give those a try - thanks.
Ivor P. (Guest)
on 2008-12-30 11:38
(Received via mailing list)
lucky you :) kudos to the staff for all using firefox

On Tue, Dec 30, 2008 at 11:26 AM, sa 125
Mukund (Guest)
on 2008-12-30 12:17
(Received via mailing list)
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
pepe (Guest)
on 2008-12-30 18:37
(Received via mailing list)
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
m. j. (Guest)
on 2009-01-02 05:51
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.
Shilo A. (Guest)
on 2009-01-07 13:15
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
} %>

<div id="people_table">
  <table>
    <%= render :partial => 'person' %> <!--people rows are drawn from
here -->
  </table>
</div>

# 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..
Mukund (Guest)
on 2009-01-08 11:12
(Received via mailing list)
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>
sa 1. (Guest)
on 2009-01-08 12:32
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!
This topic is locked and can not be replied to.