Tuesday, 13 August 2013

How to dynamically add form elements to an existing form?

How to dynamically add form elements to an existing form?

So, I basically need to do what the title says, dynamically add form
elements with a button to a form.
I currently have a form that is loaded by a button. This form is within a
jQuery popup box. I currently have a button underneath this form which
should add a few elements each time to the form. This button does not
currently work, and I am really not to sure on how to do this.
This is what I need added every time, in this format:
Question [text-box] Dummy 1 [text-box]
Dummy 2 [text-box]
Dummy 3 [text-box]
Correct [text-box]
[delete-button]
Basically, a new question will be added, along with another 4 text boxes
next to it for incorrect answers, and one correct answer. There must also
be a delete button underneath them to delete that question completely.
I'll be adding all the functionality later on, although I need the dynamic
adding and deleting working.
This is what i currently have:
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++;
}
}
This is my function that creates the quiz form (messy, I know):
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();
}
All help is greatly appreciated!

No comments:

Post a Comment