submit form via enter key

i've searched for a way to submit a form with the enter key, but
haven't found the rails way to do it.

here are a couple complex, non-rails ways to do it:
http://etutorials.org/Programming/Java+script+and+dhtml/Chapter+8.+Dynamic+Forms/8.8+Submitting+a+Form+by+an+Enter+Key+Press+in+Any+Text+Box/
http://www.java2s.com/Code/JavaScript/Form-Control/SubmitaformViaEnter.htm

what is the rails way to accomplish this?

oops. one important point: i'd like to do this on a text_area,
overriding the default enter key behavior.

There is no real rails way to do this, since it's a javascript problem.
At best you could "polish" that a bit by using link_to_function.

If you take the example from the second link, you'll need to use the
whole submitViaEnter(evt) function anyway.
Only for form building rails code can be used and then in the text_field
:onkeypress="return submitViaEnter(event)"

I'm not sure though, if that would work with a text area. (At least
you'll lose the multiline functionality)

Hi Brian,

brian scott wrote:

i've searched for a way to submit a form with the
enter key, but haven't found the rails way to do it.

My experience has been that if you've got a form in the browser and you hit
the enter key it submits the thing whether that's what you intended or not.
I'm on Windows so that may play a role in it. Does your Rails app behave
differently?

HTH,
Bill

for a text_field it does submit the form with the enter key.

maybe i should revisit using the text_field instead of text_area. my
problem with using the text_field was i wanted a multi-row box. so, i
styled it, setting the height and width. but then when entering text
the words never wrapped, instead a scroll bar appeared and the entered
text kept going on one line.

-b

ok. i'll just grin and bear it then. thanks.

brian scott wrote:

oops. one important point: i'd like to do this on a text_area,
overriding the default enter key behavior.

You'll need to install a handler on the textarea for the keypress event,
then call submit() directly on the form if the ENTER key is pressed.

If you add :wrap => 'soft' to your text_area call, it should prevent
the scrollbar appearing.

See : http://www.idocs.com/tags/forms/_TEXTAREA_WRAP.html for more options.

i'm trying to wrap a text_field (not a text_area). but i can't find a
wrap solution for a text field.

-b

ok. i'll look for some code to do that. any tips on a starting
point?

brian scott wrote:

ok. i'll look for some code to do that. any tips on a starting
point?

On May 29, 10:08 am, Danny Burkes <rails-mailing-l...@andreas-s.net>

If you're using prototype.js:

Event.observe('id-of-the-textarea', 'keypress', function(event) {
  if (event.keyCode == Event.KEY_RETURN && !event.altKey &&
!event.shiftKey) {
    this.up('form').submit();
    Event.stop(event);
  }
};

- D

thanks, Danny. that got me going. here's the code I got to work:

<% javascript_tag do %>

Event.observe(document, 'keypress', function(event) { if(event.keyCode
== Event.KEY_RETURN) document.getElementById('id-of-the-
form').submit();});

<% end %>

i couldn't get the observer to pick up key presses in the text area.
so, i put them on the document and it works. it's not optimal, but it
gets my use case solved. thanks, again.

-b

fyi

i ended up using this with an AJAX form_remote_for. and there was an
issue. if the user tabbed to the submit button and then hit enter he
ended up with 2 new objects being created: one for hitting the button
and one for triggering the observer. i added an additional check to
ensure the event was started from within the text area:
event.originalTarget.tagName == 'TEXTAREA'.

looks a bit like this:

<% javascript_tag do %>

Event.observe(document, 'keypress', function(event){ if(event.keyCode
== Event.KEY_RETURN && event.originalTarget.tagName == 'TEXTAREA')
my_ajax_function();});

function my_ajax_function() {new Ajax.Request('/target_objects',
{asynchronous:true, evalScripts:true,
parameters:Form.serialize(document.getElementById('new_target_object'))
+ '&authenticity_token=' + encodeURIComponent('<%=
form_authenticity_token %>')}); return false;
}

}
<% end %>