Question

我对jQuery很新，我不知道如何实现这个场景。

例如，如果我在原始名称和电子邮件中有一个带有两个文本框的表单。在右侧是一个加号按钮，用户可以按下，另一个原始文件将在下面创建两个字段名称和电子邮件，第二个原始文件将在右侧有一个X按钮，用户可以单击该按钮，原始文件将被删除。

名称： _ __ _ _ 电子邮件： _ __ _ __ _ +

名称： _ __ _ _ 电子邮件： _ __ _ __ _ X

保存 -

在表单底部有一个“保存”按钮。当用户按下它时，所有框中的值都会被采集并保存......这不是问题。

我的问题是当我按保存时，我应该如何实现动态字段并从字段中选择值？

Answer 1

DEMO 试试这段代码：

   $(document).on("click",".add",function(){
       //take the id
       var id = parseInt($(this).attr('id').substr(4));
       id = id+1;
       //add new row I don't know if you have a table or div layout

       $(this).after('<p><input type="text name="name_'+id+'" id="name_'+id+'"/> <input type="text" name="email_'+id+'" id="email_'+id+'"/><input type="button" id="remove_'+id+'" class="remove" value="X"/><input type="button" class="add" id="add_'+id+'" value="+" /></p>');
    });
    $(document).on("click",".remove",function(){
       //take the id
       var id = $(this).attr('id').substr(7);
       //delete
       $("#name_"+id).remove();
       $("#email_"+id).remove();
       $("#add_"+id).remove();
       $("#remove_"+id).remove();
    });

你的HTML

  <p><input type="text name="name_1" id="name_1"/> <input type="text" name="email_1" id="email_1"/><input type="button" id="add_1" value="+" /></p>

Answer 2

如果save表示将数据发送到服务器，则可以使用jQuery序列化整个表单serialize()

示例AJAX提交：

$(function(){
    $('#myForm').submit(function(){
       $.post('/path/to/server/', $(this).serialize(), function(response){
          /*do something with response if needed*/
       });
       /* prevent browser default submit*/
       return false;
    });
});

API参考：http://api.jquery.com/serialize

如果save表示在线存储，则可以使用serializeArray() http://api.jquery.com/serializearray/

如何获取动态字段值 - jQuery

2 个答案: