Making Enter key (on keyboard) to submit the information --Jquery

Question

My Form looks like this:

<body>
<form id="myForm" method="post">
<label>id:</label> 
<input type="text" name="id" id="id" size="50"/>
<div id="hidden" style="display: none;">
<label>Name:</label>
<input type="text" name="name" size="50"/><br/>
<input type="button" id="button2" value="Update" size="25" /> <br/>
</div> 
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = ''; this.style.display = 'none'" size="25"/>

I have JS that looks like this

$(document).ready(function(){  
$("#button1").click(function(){
    $.post(
        'xxx.php',
        { id: $('input[name="id"]', '#myForm').val() },
        function(json) { 

            if (json.abc === 'no'){
             alert('does not exist');   
            }
            else{
            $("input[name='name']").val(json.name);
            }},
        "json"
    );
});

$("#button2").click(function(){
    $('form#myForm').attr({action: "xxx1.php"});
    $('form#myForm').submit();
});
});

The problem is that the user can only submit this form by clicking on the submit button. Any ideas on how i can adjust the js so that the enter button(on keyboard) also submits the form?

Note: there are two submit buttons both are interlinked.

If a user hits enter does, which submit is triggered? This might help: http://stackoverflow.com/questions/302122/jquery-event-keypress-which-key-was-pressed — dmcnelis, Aug 30 '11 at 17:34
So when you say interlinked, you mean they both trigger the same action then? — dmcnelis, Aug 30 '11 at 17:36

score 1 · Accepted Answer · answered Aug 30 '11 at 17:35

You could give your input element an id, for easier retrieval:

<input id="txtName" type="text" name="name" size="50"/><br/>

Then you may bind your function to the keypress event:

$('#txtName').keypress(function (e) {
  if (e.which == 13) {
    $("#button1").click()
  }
});

Or, for a general case, you may want to just bind the function to every text box of the form:

$('#myForm input:text').keypress(function (e) {
  if (e.which == 13) {
    $("#button1").click()
  }
});

score 0 · Answer 2 · answered Aug 30 '11 at 17:40

0

This code works for me.

$('#yourform').bind('submit', function() {

answered Aug 30 '11 at 17:40

Justin

31
3

Making Enter key (on keyboard) to submit the information --Jquery

2 Answers2