0

所以我有这个http://jsfiddle.net/barmar/mDfQT/10/ 

$('.add_options').on('click', function () {
    $('#variants').append('<div class="some_id"><input type="text" id="prop_name" class="prop_name" placeholder="Property name"><a href="#" class="remover">Remove</a></div>');
    var size = parseInt($('#variants').attr("data-size"), 10) + 1;
    $('#variants').attr("data-size", size);
    $("#count").text(size);
});
$('#variants').on('click', '.remover', function () {
    $(this).closest('.some_id').hide();
    var size = parseInt($('#variants').attr("data-size"), 10) - 1;
    $('#variants').attr("data-size", size);
    $("#count").text(size);
});

用户可以根据需要添加任意数量的字段，在用户完成更新字段的值（数字 n）后，我想使用 ajax 提交数据。我的问题是，从所有文本框中获取数据同时使每个数据字段可区分的最有效方法是什么（以便我可以更新我的数据库）。Ps：它实际上是每行两个文本框，所以当用户点击添加更多它一次附加两个texboxes（属性名称和属性类型），小提琴只有属性名称。
谢谢。

4

2 回答 2

1

使用序列化 jQuery 函数：http ://api.jquery.com/serialize/

将输入包装在一个表单中，然后您可以提交序列化数据并发布您的 ajax。

var dataToBeSubmitted = $('form').serialize()
于 2013-06-21T23:43:55.893 回答
1

你的代码有一些问题

  1. ID是唯一的，每页只有一次
  2. 您的 HTML 无效 -ul标签应该只有li标签
  3. 如果你想使用.serialize方法，你input必须有name属性

但是如果我们忘记了这个错误，这里是解决方案：

$('input[name=submit]').click(function () {
    var data = $('#variants .prop_name').serialize();
    console.log(data);
});

jsFiddle 代码

于 2013-06-22T00:26:22.650 回答