Question

我有这个特殊的jquery代码来添加/删除表单上的字段，然后发送它的值：

$(document).ready(function() {
    $("#add").click(function() {

        var intId = $("#reglas div").length + 1;
        var fieldWrapper = $('<div class="fieldwrapper" id="field' + intId + '"/>');
        var fName = $('<input align="left" type="text" placeholder="Path" class="reglas_wrapper" id="path" name="field1_' + intId + '" required /> ');
        var fName2 = $('<input type="text" class="reglas_wrapper" placeholder="TTL" id="ttl" name="field2_' + intId + '" required />');
        var removeButton = $('<input align="right" type="button" id="del" class="remove" value="-" /> <br><br>');


        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(fName);
        fieldWrapper.append(fName2);

        fieldWrapper.append(removeButton);
        $("#reglas").append(fieldWrapper);

    });

    $("#cache").each(function() {
        $(this).qtip({
            content: {
                text: $(this).next('.tooltiptext')
            }
        });
    });
});

$('#formsite').on('submit', function (e) {
    //prevent the default submithandling
    e.preventDefault();
    //send the data of 'this' (the matched form) to yourURL
    $.post('siteform.php', $(this).serialize());
});

您可以在其中添加/删除缓存部分中的字段，但表单会发送除动态添加的值之外的所有值。

我该如何解决？您可以使用Firebug查看已发布的表单数据。

这是一个JS小提琴：http://jsfiddle.net/34rYv/121/

此外，我意识到当我删除字段时，其名称不会重命名。也许你也可以帮我这个：）

提前致谢尼古拉斯

Answer 1

我的Cache部分位于<form>标记之外，正如我在源代码中看到的那样，这可能就是您的字段未提交的原因。

将表单放在左/右div周围：

<div id="wrapper" align="center">
    <div class="container" align="center">
        <form id="formsite"> // your form starts here
            <div id="left">
            </div>
            <div id="right">
            </div>
        </form>    
    </div>
</div>

而不是这个（你现在拥有的）：

<div id="wrapper" align="center">
    <div class="container" align="center">
        <div id="left">
            <form id="formsite"> // your form starts here
            // the form will automatically be closed in this div
        </div>
        <div id="right">
            </form>  // this one will go away
        </div>
    </div>
</div>

另外，请尽量保持代码清洁，例如：

var fieldWrapper = $('<div></div>',{
        class: 'fieldwrapper',
        id: 'field'+intId
    });

这比以下更清洁：

var fieldWrapper = $('<div class="fieldwrapper" id="field' + intId + '"/>');

Jquery - 动态添加的输入字段不会发送值到post

1 个答案: