Form not posting to server when ENTER key is pressed

Question

I have a simple DIV that displays the name of the user:

<div id="firstNameChange" title="Click to edit" style="vertical-align:top; display:inline-block; float:left;"><?=$firstName?></div>

When the user clicks the div with the mouse it turns into a form:

<form method="post" action="" >
  <div id="firstNameChange" title="Click to edit" style="vertical-align:top; display:inline-block; float:left;"><?=$firstName?></div>
  <input type="hidden" name="firstName" id="firstName" value="<?=$firstName?>"/>
  <input type="submit" name="submitFirstName" id="saveFirstName" class="ui-icon ui-icon-disk" style="border:none; display:none; background-color:transparent; float:right; vertical-align:top;" />
</form>

With the jQuery:

$("#firstNameChange").click(function() { 
    //check if there are any existing input elements
    if ($(this).children('input').length == 0) {
        $("#saveFirstName").css("display", "inline");
        //variable that contains input HTML to replace
        var inputbox = "<input type='text' class='inputbox' name='firstName' value=\""+$(this).text()+"\">";    
        //insert the HTML intp the div
        $(this).html(inputbox);
        //automatically give focus to the input box     
        $(".inputbox").focus();
        //maintain the input when it changes back to a div
        $(".inputbox").blur(function() {
            var value = $(this).val();
            $("#firstName").val(value);
            $("#firstNameChange").text(value);
        });
    }               
});

The question is that the form ONLY posts back to the server when the Submit button is clicked with the mouse. if the user was to hit the enter key on the keyboard it wouldnt post back. Any suggestions?

I set this up here http://jsfiddle.net/AXrLG/ and it worked in my browser (Google Chrome 24.0.1312.52 Mac OS X). Are you using a different browser, or is the problem with some code you did not include in the question? — Samuel Edwin Ward, Jan 16 '13 at 00:33
Could you try to enter something for the action attribute i.e. `action='/'`. — Zorayr, Jan 16 '13 at 00:38
I think the problem is that `$(".inputbox").blur(function() {` will not be called if you press enter key in the text field. — bitWorking, Jan 16 '13 at 00:39
@SamuelEdwinWard - I am using IE 9.0.8 and i am not having success... the jfiddle worked for me, but my application still does not... when I remove the hidden element it works fine... totally bizzare! — Frank Castle, Jan 16 '13 at 00:51
@massimorai, I suppose that's your answer then... the hidden element does not seem necessary. You should post it and accept it. — Samuel Edwin Ward, Jan 16 '13 at 02:05

score 0 · Accepted Answer · answered Jan 16 '13 at 12:42

0

Found the answer. I removed the hidden element and all worked well. Thanks to everyone for your support!

answered Jan 16 '13 at 12:42

Frank Castle

363
2
19

Form not posting to server when ENTER key is pressed

1 Answers1