Question

所以，我基本上需要做标题所说的内容，动态地将带有按钮的表单元素添加到表单中。

我目前有一个由按钮加载的表单。此表单位于jQuery弹出框中。我目前在此表单下面有一个按钮，每次都应该向表单添加一些元素。这个按钮目前不起作用，我真的不确定如何做到这一点。

这是我每次都需要添加的内容，格式如下：

Question [text-box]       Dummy 1 [text-box]
                          Dummy 2 [text-box]
                          Dummy 3 [text-box]
                          Correct [text-box]
                          [delete-button]

基本上，将添加一个新问题，旁边还有另外4个文本框，用于错误答案和一个正确答案。它们下面还必须有一个删除按钮才能完全删除该问题。我稍后会添加所有功能，虽然我需要动态添加和删除工作。

这就是我现在所拥有的：

function addNewQuizField()
{
    var counter = 1;
    var limit = 10;
    var quizForm = document.getElementById('newQuizForm');

    if (counter == limit)  
    {
          alert("You have reached the limit of adding " + counter + " questions");
     }
     else 
     {
          var newQuest = document.createElement('div');
          newQuest.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
          document.getElementById(quizForm).appendChild(newQuest);
          counter++;
     }
}

这是我的功能，它创建了测验表格（凌乱，我知道）：

function createQuizForm()
{
    var quizForm = '<form name="editForm" id="newQuizForm" method="post" action="createplay.php"><input type=hidden id="dialogid" name="dialogid" value=""><input type=hidden id="dialogtype" name="dialogtype" value=""><input type=hidden id="uid" name="uid" value="<?php echo $userid; ?>"><div>Quiz Name: <input type="text" id="nameEdit" name="nameEdit" value=""></div><div>Embed Code: <textarea id="textEdit" name="textEdit" row="10" cols="50"></textarea></div><input type="submit" class="roundButton upload" value="" /><input name="addNewField" type="button" onClick="addNewQuizField();" /></form>';

    var dialogDiv = document.getElementById('dialog');

    dialogDiv.innerHTML = quizForm;

    OpenNewQuizDialog();
}

非常感谢所有帮助！

Answer 1

这是您正在寻找的当前代码吗？请检查此plunk。

如何动态地将表单元素添加到现有表单？

1 个答案: