1
Bir ekleme düğmesine bastığımda metin kutularına dinamik olarak metin eklemeye çalışıyorum. Veritabanına değerleri kaydeden ve veritabanından silen metin kutularını eklemek/kaldırmak için kod ekledim. Sayfa yüklemesinde, yine metin kutularını dinamik olarak oluşturan ve ona değer katan showitem adlı bir işlev oluşturdum.JQuery'de veriler nasıl güncellenir ve tek kayıt düğmesine veri eklenir?
Artık benim sorunum, herhangi bir metin kutusunu güncellediğimde, veritabanında güncellenmesi ve veritabanına eklenecek yeni bir metin kutusu eklenmesi durumunda. Burada
<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>
Ve data.php dosyasıdır:
<?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";
}
Bir tek kurtarmak düğme tıklama güncellenmiş verileri artı yeni eklenen veri deposunu kaydetmek istediğiniz
İşte benim kodudur.
item_text1 nedir? – Patel
data.php item_text1 veritabanı alan adıdır ve komut dosyasında textbox name – suh