Make a link 'enter-clickable'

Question

If you have a normal form:

<form method='post' action='#'>
<input type='text' name='#' />
<input type='submit' value='Submit />
</form>

Then you can fill in the input field, and press enter. However, I am using a link to do my work so:

<form method='post' action='#'>
<input type='text' name='#' />
<a href='#' class='button' onclick='get_form(this).submit();'>Submit</a>
</form>

That works like a charm, however, I want it to inherit the 'enter-clickable' that the normal submit field has. Is that possible through some javascript?

This might help: http://stackoverflow.com/questions/477691/html-submitting-a-form-by-pressing-enter-without-a-submit-button — Tim, Feb 18 '12 at 16:04
Why are you using a link when a button already does what you want it to do? If it's for style purposes, you could use a ` — Brandan, Feb 18 '12 at 16:51

score 5 · Accepted Answer · answered Feb 18 '12 at 16:00

5

$('#your_input_textfeild_id').keypress(function(e) {
     //check if enter is pressed
   if(e.keyCode == 13) {


    //click your link
        $('#your_submit_link_id').click();



    }
  });

answered Feb 18 '12 at 16:00

Ajeet Sinha

2,315
20
20

score 2 · Answer 2 · answered Feb 18 '12 at 16:30

2

try this:

<script>
   document.getElementById('TEXTBOXID').onkeypress = function(e){
      var evt = e || window.event;
      if(evt.keyCode == 13){
          get_form(this).submit();
      }
   }
</script>

answered Feb 18 '12 at 16:30

André Alçada Padez

10,987
24
67
120

The Alpha · Answer 3 · 2012-02-18T17:20:16.597

1

You may try this

document.getElementById('my_input').onkeypress = function(e)
{
  var event = e || window.event;
  if(event.keyCode == 13 && this.value!="")
  {
     form = this.parentNode;
     if(form.tagName.toLowerCase() == "form") 
     {  
        form.submit();
     } 
  }
}

You have to add an id to your text box and replace my_input with it.

edited Feb 18 '12 at 17:20

answered Feb 18 '12 at 17:01

The Alpha

143,660
29
287
307

score 1 · Answer 4 · answered Feb 18 '12 at 17:16

I think the correct way to do this is to actually include a

<input type="submit"  >

which you can then style to be hidden. Alternatively, just style the submit element to look the way you want. My reason for this is that the browser looks for that submit element and that's how the enter key gets assigned to submit the form. And I somehow think it's better to let the browser handle matters like that rather than using JavaScript to capture a keypress event.

Make a link 'enter-clickable'

4 Answers4