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?

Answer 1

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