CODEWITHSUNDEEP
javascript
Fizzix
Fizzix

Reputation: 24395

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!

Upvotes: 1

Views: 1417

Answers (1)

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

Is this what you're looking for with your current code? Check this plunk.

Upvotes: 1

Related Questions