我正在尝试在按下添加按钮时动态地向文本框添加文本。
我添加了用于添加/删除文本框的代码，这些文本框将值保存到数据库并从数据库中删除。在页面加载时，我创建了一个名为showitem的函数，它再次动态创建文本框并为其填充值。
现在我的问题是，当我更新任何文本框时，它应该在数据库中更新，如果我添加任何新的文本框，那么该值应该添加到数据库中。
这是我的代码：
<HTML>
<HEAD>
<style>
#frmAddHtml{border: #ccc 1px solid; width:550px; margin-left: 400px;}
.add_button{ margin-top:20px; margin-left:470px; padding:5px; }
#outer div{ margin-bottom:10px; border: #ccc 1px solid;padding: 5px; width:480px;margin-left: 20px;}
input[type="text"] {padding: 5px;border:#ccc 1px solid;margin: 0px 20px;width:180px;height: 20px; }
#save_button {padding: 5px;border:#ccc 1px solid;margin: 0px 20px;width:180px;height: 30px; margin-left: 180px; padding: 5px;}
</style>
<SCRIPT src="http://code.jquery.com/jquery-2.1.1.js"></SCRIPT>
<SCRIPT>
$(document).ready(function(){
showitem();
$('.add_button').click(function() {
var textHTML = '<div><input type="text" name="item_text1" value=""/><input type="text" name="item_text2" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="image/minus.png"/></a></div>';
// $('.item_text:last').clone().insertAfter('.item_text:last');
$('.outer').append(textHTML);
});
$('.outer').on('click', '.remove_button', function() {
$(this).parent('div').remove();
var item_id = $(this).parent('div').find('input[type="hidden"]').val();
$.ajax({
type : 'POST',
url : 'data.php',
data : "action=deleteitem&item_id="+item_id,
success : function(data) {
$("#msg").html(data);
}
});
});
// $(document).on("keyup", "input[type=text]", function(){
// var $textbox = $(this);
// var item_id = $(this).parent('div').find('input[type="hidden"]').val();
// alert($textbox.val());
// alert(item_id);
// });
$('#save_button').click(function (){
var x = [];
var inputEle = document.getElementsByName("item_text1");
for(var i = 0; i < inputEle.length; i++){
inputField1 = inputEle[i].value;
x.push(inputField1);
}
var y = [];
var inputEle1 = document.getElementsByName("item_text2");
for(var i = 0; i < inputEle1.length; i++){
inputField2 = inputEle1[i].value;
y.push(inputField2);
}
var a = [];
var addedEle = document.getElementsByClassName("textbox1");
for(var i = 0; i < addedEle.length; i++) {
addedfield=addedEle[i].value;
a.push(addedfield);
}
alert(a);
// $('input[type="hidden"]').each(function () {
// z.push($(this).val());
// });
// alert(z);
var data = {'first_array':JSON.stringify(x),'second_array':JSON.stringify(y),'action':"additem"};
$.ajax({
type : 'POST',
url : 'data.php',
data : data,
success : function(data) {
$("#msg").html(data);
$("#outer").empty();
showitem();
}
});
});
});
function showitem() {
$.ajax({
type : 'POST',
url : 'data.php',
data : "action=showitem",
success : function(data) {
var item = JSON.parse(data);
for (var i = 0; i < item.length; i++){
var textHTML='<div><input type="hidden" name="item_id[]" value="'+item[i].id+'"/><input type="text" id="textbox1" class="textbox1" name="item_text1[]" value="'+item[i].item_text1+'"/><input type="text" name="item_text2[]" value="'+item[i].item_text2+'"/><a href="javascript:void(0);" class="remove_button" title="Remove field"><img src="image/minus.png"/></a></div>';
$('.outer').append(textHTML);
}
}
});
}
</SCRIPT>
</HEAD>
<BODY>
<form name="frmAddHtml" id="frmAddHtml" action="" method="post">
<p id="msg"></p>
<a href="#" class="add_button" title="Add field"><img src="image/pus1.png"/></a>
<div class="outer" id="outer">
<!--
<div class="item_text">
<input type="text" name="item_text1" value=""/>
<input type="text" name="item_text2" value=""/>
<a href="#" class="remove_button" title="Remove field"><img src="image/minus.png"/></a>
</div>
-->
</div>
<input type="button" id="save_button" class="button" value="Save">
</form>
</BODY>
</HTML>
这是我的data.php文件：
<?php
if(!mysql_connect("localhost", "root", "1234")) {
die(' connection problem ! --> '.mysql_error());
}
if(!mysql_select_db("logindemo")) {
die('oops database selection problem ! --> '.mysql_error());
}
$x = 0;
$action = $_POST['action'];
if($action == "additem") {
$array1 = json_decode($_POST['first_array']);
$array2 = json_decode($_POST['second_array']);
foreach(array_combine($array1, $array2) as $key => $value) {
$query="INSERT INTO tbl_item(item_text1,item_text2) VALUES ('$key','$value')";
if(mysql_query($query)) {
$x++;
}
}
if($x >= 1) {
echo "".$x." data added";
} else {
echo "error";
}
} else if($action == "showitem") {
$query = "select * from tbl_item";
$stmt = mysql_query($query);
while($crow = mysql_fetch_array($stmt)) {
$resultset[] = $crow;
}
echo json_encode($resultset);
} else if($action == "deleteitem") {
$id = $_POST['item_id'];
$query = "delete from tbl_item where id=$id";
$stmt = mysql_query($query);
echo "deleted";
}
我想在单个保存按钮单击中保存更新的数据和新添加的数据存储。
答案 0 :(得分：0)
有两种方法可以执行此功能。
检查从数据库中删除字段值的可能性，并在编辑时始终添加新记录。
填充时使用index作为输入字段的数据库ID值。
＆LT;输入类型=＆＃34;文字＆＃34;命名=＆＃34; item_text1 [1]＆＃34;值=＆＃34; 10＆＃34; /＆GT;
＆LT;输入类型=＆＃34;文字＆＃34;命名=＆＃34; item_text1 [2]＆＃34;值=＆＃34; 345＆＃34; /＆GT;
＆LT;输入类型=＆＃34;文字＆＃34;命名=＆＃34; item_text1 [2]＆＃34;值=＆＃34; 345＆＃34; /＆GT;
。
。
。
。
＆LT;输入类型=＆＃34;文字＆＃34;命名=＆＃34; item_text1 [10]＆＃34;值=＆＃34; 787＆＃34; /＆GT;
将max_id保留为隐藏字段，
<input type="hidden" name="max_id " value="10"/>
并且要添加新记录，
$('.add_button').click(function()
{
var count = $("#max_id").val()+1;
var textHTML = <input type="text" name="item_text1[count]" value=""/>';
$('.outer').append(textHTML);
$("#max_id").val(count); })
由于数据库id是item_text1的索引，因此您可以在服务器端轻松检查它是新字段还是现有字段。