Javascript 如何在jQuery中的单个保存按钮上更新数据和添加数据？_Javascript_Php_Jquery_Ajax

Javascript 如何在jQuery中的单个保存按钮上更新数据和添加数据？

javascript php jquery ajax

Javascript 如何在jQuery中的单个保存按钮上更新数据和添加数据？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,当我按下“添加”按钮时，我试图将文本动态添加到文本框中。我添加了添加/删除文本框的代码，这些文本框将值保存到数据库并从数据库中删除。在页面加载时，我创建了一个名为showitem的函数，该函数再次动态创建文本框并向其填充值现在我的问题是，当我更新任何文本框时，它应该在数据库中更新，若我添加任何新的文本框，那个么该值应该添加到数据库中这是我的密码： <HTML> <HEAD> <style> #frmAddHtml{border: #ccc 1px sol

当我按下“添加”按钮时，我试图将文本动态添加到文本框中。我添加了添加/删除文本框的代码，这些文本框将值保存到数据库并从数据库中删除。在页面加载时，我创建了一个名为

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>

我想通过单击一个保存按钮来保存更新的数据和新添加的数据存储。

有两种方法可以实现此功能

检查从数据库中删除字段值的可能性，并在编辑时始终添加新记录

填充时，将索引用作输入字段的数据库id值

.
.
.
.

将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);   })

$（'.add_按钮'）。单击（函数（）
{
var count=$（“#max_id”）.val（）+1；
var textHTML='；
$（'.outer'）.append（textHTML）；
$（“#max_id”）.val（计数）；}

由于数据库id是项_text1的索引，您可以在服务器端轻松检查它是新字段还是现有字段。