Question

This page allows users to add questions dynamically (this part works), within each question a user can add one to many answers which are also dynamic. Here’s a wire frame of the page which might help: https://gomockingbird.com/mockingbird/#2ql43kg/0W2gD1

As I said, the question part is done and the fields are being posted from the form correctly.

I need some help thinking through how to go about adding the answer area. Here is my code thus far.

<script>
currentQuestion = 1;

 function addQuestion(){
// Clone our question container and assign it a new ID
var newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
// Update the ID and Name of the textarea in our question container
newElement.children('#question0').attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
// Append our new question container to the bottom
newElement.appendTo('#questionArea');

currentQuestion++;
}

function addAnswer(){
//var newAnswer = $('#question0-answer1').clone().attr('id','question0-answer2').attr('name','question0-answer2');
//newAnswer.appendTo('#answerContainer0');
}
</script>
</head>

<form method="post" action="test.cfm">
<div id="questionArea">
<div id="questionContainer0" class="questionContainer">
    <textarea id="question0" name="question0"></textarea>
    <div id="answerContainer0">
    <input type="text" id="question0-answer1" name="question0-answer1" />
    <p><a href="#" onClick="addAnswer();" id="add">Add Answer</a></p>
</div>  
</div>

<input type="submit" value="go" name="submit">
</form>
<a href="#" onClick="addQuestion();" id="addQuestion" title="Add a question" class="link-sm" style="background-color:red;">Add Question</a>

FWIF, I am new to JQuery and if how I am approaching this is wrong entirely, please let me know 🙂 – I am sure there is a slicker way to do it without writing an addQuestion function and calling it with an onClick.

Answer 1

I’d do it this way:
First, change your addAnswer link html to the following:

<a href="javascript:" class="add-answer">Add Answer</a>

Your script would be this:

$(document).ready(function(){
   $(".add-answer").click(function(){ //bind a click event
       addAnswer($(this));
   });
});

function addAnswer($anchor){
  var questionId = $anchor.siblings("textarea").attr("id");
  var answerIndex = $anchor.siblings(":text").size() + 1;
  var answerId = questionId + "-answer" + answerIndex;
  var $lastAnswer = $anchor.siblings(":text:last");
  $lastAnswer.clone().attr("id", answerId).attr("name", answerId).insertAfter($lastAnswer); //Changed this line
}

And I’d remove the currentQuestion global var and change the addQuertion function also:

function addQuestion(){
  var curentQuestion = $(".questionContainer").size(); //Number of questionContainers
  var $newElement = $('#questionContainer0').clone().attr('id','questionContainer'+currentQuestion);
  $newElement.children('#question0'). attr('id','question'+currentQuestion).attr('name','question'+currentQuestion);
  //Update the answerContainer div id.
  $newElement.children('#answerContainer0') .attr('id','answerContainer'+currentQuestion);
  //Update the first answer id and name
  var answerId = 'question'+currentQuestion+'-answer1';
  $newElement.children('#question0-answer1').attr('id',answerId).attr('name',answerId);
  $newElement.appendTo('#questionArea');
}

And that’s it. If you have doubts, just ask me.
Hope this helps. cheers