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来获取表单，然后通过每个子进行迭代，在相同的特性上创建一个新元素，但最后使用下划线uniq id建议更改id。希望它有所帮助

Answer 2

在此JSFiddle中，它会简要地显示hwo添加更多表单，每个表单都有唯一的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>

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

2 个答案: