Dynamic javascript form

Question

I have a simple form as follows so a user can type the name of a question:

<input type="text" id="question_name" name="question_name" value="">Question Name: <br />
<a href="#" id="addanother" onclick="addNewQuestion()">Add Another</a>
<div id="container"/>

<input id="go" name="btnSubmit" type="submit" value="Submit" class="btn" />

I am wanting to create a Javascript function (addNewQuestion()) which allows a user to add another question dynamically by clicking the "Add Another" link. All the text boxes with the questions should be displayed on the screen.

I understand that it is using getElementById and most likely a for loop but I keep hitting a brick wall. Can anyone show me a simple solution please?

@dave I can actually do this using an array in jquery just fine, but i'm required to use just javascript. — StackMeUp123
– StackMeUp123, Commented Feb 17, 2016 at 16:26

Dave · Accepted Answer · 2016-02-17 16:36:18Z

1

There are many ways to do this. Here's a simple example in plain JavaScript. Note that you will either want to avoid using ids so they aren't duplicated in the DOM, or you will want to dynamically name them.

function addNewQuestion() {
  var container = document.getElementById("questions");
  var question = document.querySelector(".question"); 
  container.appendChild(question.cloneNode(true));
  return false;
}

.question { display: block }

<div id="questions">
  <label class="question">
    Question Name:
    <input type="text" value="" />
  </label>
</div>
<a href="#" id="addanother" onclick="return addNewQuestion()">Add Another</a>

answered Feb 17, 2016 at 16:36

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic javascript form

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related