将 DIV 转换为输入元素并将数据保存到数据库中答案

【问题标题】：Turning a DIV into a input element and save data into a database将 DIV 转换为输入元素并将数据保存到数据库中
【发布时间】：2013-01-15 02:38:29
【问题描述】：

我有一个简单的 div 用于显示用户帐户信息，例如名字：

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

我有 jquery 代码用来把它变成一个输入元素：

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

                    });
                }               
        });

我创建了一个 PHP 变量来获取输入元素的内容，但它没有填充变量。出于某种原因，没有使用我在上面创建的 JS 输入元素的名称值设置该变量。任何想法为什么会发生这种情况？

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

}

【问题讨论】：

您对 SQL 注入攻击完全开放，如果您还没有受到攻击，那么您将会被黑客入侵。学习使用 PDO 或类似的准备好的查询来完全避免这个问题。
感谢您的意见。您能对此进行更多扩展吗？这与我的问题相关还是只是一个补充建议？
从不信任输入（对大写感到抱歉）。查找 php 的 fsockopen 并查看第一个用户 cmets。阅读一点关于 html get 和 post 的内容，然后了解：总是验证输入，所有这些，包括 cookie。谢天谢地，这不是火箭科学。
我一定会在这方面做足功课。我是一个新手，我遇到的这个问题更像是一个学习挑战，而不是一个项目。有人对如何解决上述问题有任何建议吗？
@massimorai，这不仅仅是一个小建议......而且它与安全性有关。由于没有正确地转义查询中的输入，您实际上已经破坏了查询。如果这只是一个家庭作业项目也没关系。您会遇到某些输入（例如 ` \ ` 或 ` " `）的麻烦，更不用说所有自动机器人都会通过测试 SQL 注入攻击来攻击您的代码。我不能强调足够了，如果你没有使用准备好的/参数化的查询，那么无论项目规模如何，你都做错了，应该学习正确的方法。

标签： php javascript jquery mysql

【解决方案1】：

问题是当你这样做时你替换了你的输入元素：

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

一种解决方案是将您的 HTML 更改为：

<div id="firstNameChange"><?=$firstName?></div><input type="hidden" name="firstName" id="firstNameHidden"/>

然后在你的模糊函数中将隐藏的输入值设置为文本输入值，如下所示：

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

【讨论】：

非常感谢，但不起作用:(或者我只是不明白。
将您的 HTML 更改为我发布的内容，并在 $("#firstNameChange").text(value); 之后添加那段 javascript；
看这个小提琴：jsfiddle.net/5VpAL（基本上只是凯恩的回答）。测试它并检查输入脚本的所有 php 值，请参阅stackoverflow.com/questions/196664/print-out-post-values。然后你就可以看到发生了什么。
谢谢大家，这正是我所需要的。 @Brad - 感谢您在我的代码中发现了这个问题。我想是时候考虑在我职业生涯的早期而不是在它发生之后受到攻击的可能性了。谢谢大家！

【解决方案2】：

你为什么要这样做？ $("this .inputbox").focus();

首先，“这个.inputbox”一开始是没有意义的。

 $(inputbox).focus();

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

另外，当你做 $(this).html(inputbox); 时，你意识到了吗？你用新创建的输入元素替换你的 DIV 的所有内容？所以，你的<?=$firstName?> 已经不在了。

【讨论】：