将DIV转换为输入元素并将数据保存到数据库中
Turning a DIV into a input element and save data into a database
我有一个简单的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输入元素的name值。知道为什么会这样吗?
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');
}
问题是当你这样做时你替换了你的输入元素:
$("#firstNameChange").text(value);
一个解决方案是把你的HTML改成这样:
<div id="firstNameChange"><?=$firstName?></div><input type="hidden" name="firstName" id="firstNameHidden"/>
然后在模糊函数中设置隐藏输入值为文本输入值,如下所示:
$("#firstNameHidden").val( value );
你为什么要这样做?$("这.inputbox").focus ();
首先,"this .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?>
在这一点上消失了
相关文章:
- 如何使用 Angular JS 将数据保存在数据库中
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- 将数据保存到数据库(ajax/php)后,使文本字段变灰/禁用
- 获取用户位置并将坐标保存在数据库中
- ForerunnerDB将其数据库保存在哪里
- 如何在本地存储(或其他数据库)上安全地保存敏感访问代码
- 输入框值将保存到 MySQL 数据库
- 如何从重定向的支付处理器网站提取交易详细信息并保存到我的rails 4数据库
- 将javascript变量保存到数据库中
- ASP.NET MVC-如何捕获多个复杂的ListBox值并将其保存到数据库中
- jTinder保存到数据库
- 验证数据并将其保存到数据库以供实时应用程序使用的正确方法
- Angular js,在选择元素上,我想 POST 数据以将其保存在数据库中,然后我想使用 PUT 更新它而无需重新加载
- HTML5数据库保存了详细信息以及一个按钮
- 如何确保在 Mocha 中的 done() 之前执行对数据库的循环保存
- 索引数据库保存范围为
- 将动态输入表单数据保存到数据库kendoui中
- 可以'编辑后不会将数据保存在数据库中,但网格显示更改
- 我如何在Asp.netmvc4中使用jquery-ajax创建文本框来保存数据库中的任何输入
- 在phonegap应用程序中保存数据库的位置