是否有另一种方法可以创建具有不同 ID 的类似表单？

Question

基本上我想复制表单，但我希望它们具有不同的 ID。我还将使用表单中输入的值，因此它们的 ID 必须或多或少相似。因此，一种形式的 id 为“formA”，下一种形式为“formB”。我的同事建议在 IDS 中附加一个 int 值。这就是我所做的

var FormCounter = 1;

function addForms() {

    // When the element '#addForm' is clicked then the forms are appended to the formContainer div

    $("#addForm").click(function() {

         /* 
            Note: you can add as many forms as you want and each will have a different ID.
            Each ID will be unique as each ends with a different Integer.
        */

        var formTitle = "<p> Form " + formCounter + "</p>";

        // declare your form types here
        var formType = "<input type='textField' id='textField" + formCounter + "'</input>";

        // append to the formContainer div 
        $("#formContainer").append(formTitle);

        // create a form tag
        $("#formContainer").append("<form>");

        /* 

                INSERT FORMS HERE


        */

        $("#formContainer").append(formType);


        // close form tag
        $("#formContainer").append("</form>");

        // insert a horizontal line
        $("#formContainer").append("<hr>");

        ++formCounter;
    }); 
}

我目前将此代码与一个文本字段一起使用。有没有其他方法可以做到这一点？之后我要做的是获取在字段中输入的值，然后将它们显示在表格上。

Answer 1

如果你想复制它们，你可以使用 jquery 来获取表单，然后遍历每个子元素，在相同的特征上创建一个新元素，但最后更改 id 建议使用下划线 uniq id。希望对你有帮助

Answer 2

在这个JSFiddle 中，它简要显示了如何添加更多表单，每个表单都有唯一的id - 正如你的同事建议的那样 - 还将计数器值分配给相应表单的输入和按钮，然后增加计数器

var formCounter = 1;

$('#btn').on('click', function(){
	$('#formContainer').append('<p>form:' + formCounter + '<form id="f-'+formCounter+'"><input type="text" id="t-'+formCounter+'"><input type="submit" id="s-'+formCounter+'"></form></p>');
++formCounter;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btn">Add a New Form</button>
<div id="formContainer"></div>

更新：正如您要求的另一种方法，此代码使用原始 javascript，而不是像上面那样在一个附加行中注入 HTML 代码，这里我们创建每个 DOM 元素并设置其 ID 并将其子元素附加到它，就像这样 JSFiddle

var i = 0, form, labelText, inputText, inputSubmit, btn = document.getElementById("btn");

btn.addEventListener('mouseup', function () {
    i++;
    form = document.createElement('form');
    form.id = 'form' + i;
    labelText = document.createElement('label');
    labelText.innerHTML = 'form ' + i + ': ';
    form.appendChild(labelText);
    inputText = document.createElement('input');
    inputText.setAttribute("type", "text");
    inputText.id = 'text' + i;
    form.appendChild(inputText);
    inputSubmit = document.createElement('input');
    inputSubmit.setAttribute('type', 'submit');
    inputSubmit.id = 'sudmit' + i;
    form.appendChild(inputSubmit);
    document.getElementById("formContainer").appendChild(form);
});

form {
    margin:5px;
}

<button id="btn">Add a New Form</button>
<div id="formContainer"></div>