1

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

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

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

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

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

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

  • 节省 -

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

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

4

2 回答 2

2

演示 试试这个代码：

   $(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>
于 2013-01-20T19:02:57.753 回答
1

如果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/

于 2013-01-20T19:08:45.227 回答