有没有其他方法可以创建具有不同ID的类似表单

Is there another way of creating similar forms with different IDs?

本文关键字：ID 表单 方法 其他 创建 有没有      更新时间：2023-09-26

基本上我想复制表单，但我希望它们有不同的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;
    }); 
}

我目前使用这个代码和一个文本字段。有其他方法吗？之后我想做的是获取字段中输入的值，然后将它们显示在表中。

如果你想复制它们，你可以使用jquery来获取表单，然后通过每个子元素迭代，生成具有相同特征的新元素，但最后建议使用下划线uniq id来更改id。希望这对有帮助

在这个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>

UPDATE： 正如您所要求的另一种方法，此代码使用原始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>

相关文章：