Turning a DIV into a input element and save data into a database

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');

}

You are **wide open** to SQL injection attacks, and you **will be hacked** if you haven't been already. Learn to use prepared queries with PDO or similar to avoid this problem entirely. — Brad, Jan 15 '13 at 02:40
Thank you for the input. Can you expand a little more on this? is this relavent to my question or just an added suggestion? — Frank Castle, Jan 15 '13 at 02:43
NEVER TRUST INPUT (sorry for the caps). Lookup php's [fsockopen](http://php.net/manual/en/function.fsockopen.php#101872) and see one of the first user-comments. Read a LITTLE about html get and [post](http://www.jmarshall.com/easy/http/#postmethod) and then understand: alway's validate input, All of it, including cookies. It's not rocket science thank god. — GitaarLAB, Jan 15 '13 at 02:49
I will be sure to do my homework on that. I am a newbie and this problem i have is more of a challenge to learn, rather then a project. anyone have any suggestions on how to tackle this issue stated above? — Frank Castle, Jan 15 '13 at 02:51
@massimorai, This isn't just a minor suggestion... and it has to do with far more than security. By not properly escaping input in your queries, you effectively have broken queries. It doesn't matter if this is just a homework project. You **will** run into trouble with certain input (such as ` \ ` or ` " `), not to mention all of the automated bots hitting your code with tests for SQL injection attacks. I can't stress enough that if you are not using prepared/parameterized queries, you are flat out doing it wrong and should learn the right ways, no matter what the scale of project. — Brad, Jan 15 '13 at 03:23

score 2 · Accepted Answer · answered Jan 15 '13 at 02:54

2

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 );

answered Jan 15 '13 at 02:54

Kane Wallmann

2,292
15
10

Thanks a lot, but not working :( or maybe i just dont understand. – Frank Castle Jan 15 '13 at 03:07
1

Change your HTML to what I posted and add that bit of javascript after $("#firstNameChange").text(value); – Kane Wallmann Jan 15 '13 at 03:13
2

See this fiddle: http://jsfiddle.net/5VpAL/ (is essentially just Kane's answer). Test it and check all php values that enter the script, see http://stackoverflow.com/questions/196664/print-out-post-values. Then you can see what is happening. – GitaarLAB Jan 15 '13 at 03:56
Thanks guys, this is exactly what I needed. @Brad - thanks for identifying this fall out in my code. I suppose it is time to consider the possibility of being attacked early on in my career as opposed to after it has happened. thanks a million everyone!! – Frank Castle Jan 15 '13 at 14:03

score 1 · Answer 2 · answered Jan 15 '13 at 02:51

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.

Turning a DIV into a input element and save data into a database

2 Answers2

Linked