Turning A Div Into A Input Element And Save Data Into A Database

I have a simple div used to display user account info such as first name:

I have jquery code used to turn it into

Solution 1:

The problem is you replace your input element when you do this:

$("#firstNameChange").text(value);

One solution is to change your HTML to this:

<divid="firstNameChange"><?=$firstName?></div><inputtype="hidden"name="firstName"id="firstNameHidden"/>

Then in your blur function set the hidden input value to the text input value like this:

$("#firstNameHidden").val( value );

Solution 2:

Why are you doing this? $("this .inputbox").focus();

First of all, "this .inputbox" makes no sense to begin with.

 $(inputbox).focus();

 //maintain the input when it changes back to a div
 $(inputbox).blur(function(){
     var value = $(this).val();
     $("#firstNameChange").text(value);
 });

Also, do you realize that when you do $(this).html(inputbox); you replace all content of your DIV with the newly created input element? So, your <?=$firstName?> is gone at that point.