所以,我基本上需要按照标题所说的那样,将带有按钮的表单元素动态添加到表单中。
我目前有一个通过按钮加载的表单。该表单位于 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();
}
非常感谢所有帮助!
最佳答案
这是您当前代码所寻找的吗?检查这个plunk .
关于javascript - 如何动态添加表单元素到现有表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18206901/