Question

这是我的按钮

<input type="button" value="add-entry" id="add">

这是单击按钮后进行的ajax调用

<script>
$(document).ready(function(){
    $("#add").click(function(e){
        event.preventDefault()
        var htmlAppend='<div><table><tr><td><input type="text" name="user-name"></td></tr>'+
        //  '<tr><td><input type="text" name="e-mail"></td></tr>'+
        '<input type="button" value="delete" id="delete" /></table></div>'
     $('#items').append(htmlAppend);
     localStorage.setItem("htmlAppend", htmlAppend);
    });

     var htmlAppend = localStorage.getItem("htmlAppend");
     if (htmlAppend) {
        $("#items").append(htmlAppend);
     }


    $('body').on('click','#delete',function(e){
        $(this).parent('div').remove();
    });

});
</script>

问题是，如果我单击按钮2次，则输入字段的名称将相同，那么我如何获取具有相同名称的两个不同文本框的值。如果可能的话，请提出其他建议。

Answer 1

您好，@ Rimjhim Gupta，据我了解，您正在尝试在页面上动态添加元素，然后检索其值。我看到两个可能的变体可以解决此问题：1）添加一个计数器变量，每次单击#add按钮时该值都会增加，并将其值添加到新元素名称中。在这种情况下，新创建的元素的名称将始终不同，您将能够根据需要对其进行操作。例如：

let counter = 0;
$(document).ready(function(){
    $("#add").click(function(e){
        event.preventDefault()
        var htmlAppend=`<div><table><tr><td><input type="text" name="user-name"${counter}></td></tr>`+
        `<tr><td><input type="text" name="e-mail"${counter}></td></tr>`+
        `<input type="button" value="delete" id="delete" /></table></div>`
     $('#items').append(htmlAppend);
     localStorage.setItem("htmlAppend", htmlAppend);
     counter++;
    });

     var htmlAppend = localStorage.getItem("htmlAppend");
     if (htmlAppend) {
        $("#items").append(htmlAppend);
     }


    $('body').on('click','#delete',function(e){
        $(this).parent('div').remove();
    });

});

我在这里使用了字符串插值（在Internet上检查它，这是我一直使用的东西）。

2）第二种可能的变体是使用循环来遍历父DIV（我更喜欢使用循环）并分别从每个div检索数据。但是我个人更喜欢第一种。如果您需要其他提示，请告诉我。

我想在按钮单击上添加动态输入框，然后将值保存到数据库中（PostgreSQL）

1 个答案: