当我按下添加按钮时，我尝试动态地将文本添加到文本框。
我添加了用于添加/删除文本框的代码，这些文本框将值保存到数据库并从数据库中删除。在页面加载时，我创建了一个名为 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";
}
我想通过单击一次保存按钮来保存更新的数据以及新添加的数据存储。
最佳答案
有两种方法可以实现此功能。
检查从数据库中删除字段值的可能性，并在编辑时始终添加新记录。
填充时使用索引作为输入字段的数据库 ID 值。
<输入类型=“文本”名称=“item_text1[1]”值=“10”/>
<输入类型=“文本”名称=“item_text1 [2]”值=“345”/>
<输入类型=“文本”名称=“item_text1 [2]”值=“345”/>
.
.
.
.
<input type="text"name="item_text1[10]"value="787"/>
保留 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 的索引，因此您可以在服务器端轻松检查它是新字段还是现有字段。
关于javascript - 如何在 jQuery 中的单个保存按钮上更新数据和添加数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36621585/