Question

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

<div id="firstNameChange"><?=$firstName?></div>

I have jquery code used to turn it into an input element:

//execute when nameChange DIV is clicked
        $("#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     
                    $("this .inputbox").focus();

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

                    });
                }               
        });

I created a PHP variable to grab the contents of the input element but it is not filling the variable. For some reason, the variable is not being set with the name value of the JS input element that i created above. any ideas why this is happening?

if(isset($_POST['submit'])){
$firstName = $_POST['firstName'];
$sql = "UPDATE `user_accounts` SET `first_name`='$firstName' WHERE email='" . $_SESSION['email'] . "' AND user_id=" . $_SESSION['userID'] ;
$_dbConn->update($sql) or die(mysql_error());
Redirect_To('index.php?page=userProfile');  

}

Answer 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:

<div id="firstNameChange"><?=$firstName?></div><input type="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 );