Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="../plugin/jquery-1.6.1.min.js"></script>
<script src="../plugin/jquery.validate.min.js"></script>
<script src="../plugin/jquery.form.js"></script>
<link rel="stylesheet" type="text/css" href="../style/form.css" />
<script>
$(document).ready(function() {
    $("#add").click(function() {
        var id = "input" + $(this).attr("id").replace("field","");
        var intId = $("#buildyourform div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" class=\"fieldname\" />");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fType);
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>


</head>
<body>
<div id="stylized" class="myform">
<form id="edit" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit">
<div class="spacer"></div>

</form>
</body>
</html>

这是动态表单的代码，但是，目前文本框名称和选择框名称是'inputadd'，我想将其更改为input1，input2，input3，这意味着当用户添加字段时，它将是计数器+ 1和文本字段的名称，选择字段将是该字符串，并且如果删除计数器相同-1，我怎样才能修改代码来实现这一点？谢谢

Answer 1

两种方式 - 使用全局变量：

int formcount = 0;

$(document).ready(function() {
    $("#add").click(function() {
        var id = formcount++;
    });
});

或者计算'#buildyourform'中有'fieldwrapper'类的元素数量（最好）：

$(document).ready(function() {
    $("#add").click(function() {
        var id = $('#buildyourform .fieldwrapper').size();
    });
});

（请记住，id不能以数字开头，你应该用字母字符作为前缀）

Answer 2

您应该使用input[]代替input1，input2，input3，...

<form id="your-form">
    <li><input type="text" name="input[]" /></li>
    <li><input type="text" name="input[]" /></li>
    <li><input type="text" name="input[]" /></li>
    <li><input type="text" name="input[]" /></li>
    <li><input type="text" name="input[]" /></li>
    <li><input type="text" name="input[]" /></li>
    <input type="submit" />
</form>

这应该将POST字段数据作为所有input[]元素的数组提供给你，例如在PHP中：

foreach ($_POST['input'] as $input) {
    echo $input . PHP_EOL;
}

通过这种方式，您无需继续使用JavaScript，只需添加name="input[]"的其他字段。

如何在jquery中创建一个计数器

2 个答案: