Question

I have an application which you can test in my jsfiddle to see how it works, jsfiddle. Now what this app does is allow users to select options and answers for each question, (the app on jsfiddle does not show the question as it is not needed for this question).

Now what happens is the user selects an option, types in the number of answers he/she wants and then selects the answers from the buttons below. The user will add a question and then a new row will appear in the table showing the answers selected.

Example on how to use the app so you can try it yourself in jsfiddle:

1. open the grid (open grid link) and select option “4”.

2. Type in number 2 in the “Number of Answers” Textbox (#numberAnswerTxt)

3. Select Buttons “A” and “C”.

4. Click on “Add Question” button.

Now as you can see a new table row appears but nothing is under the “Answer2 column except an empty textbox. (Don’t need textbox).

What I want is the exact copy of the Answers buttons (if you follow example in fiddle then its Buttons “A” to “D” with “A” and “C” selected) to be displayed in the “Answer” column when an answer is submitted in a new table row. I want to show it as the buttons as they are but I have absolutly no idea how to do this.

Does anyone know how to do it?

The code which controls the new table row for the “Answer” column is below:

cell = document.createElement("td");
 cell.className = "answer";
 input = document.createElement("input");
 input.name = "answer_" + qnum;
 cell.appendChild(input);
 row.appendChild(cell);

This can be found in the function insertQuestion(form) which is near the end of the Jsfiddle Javascript section.

Answer 1

I’m not sure if this is what you have in mind, but the following modified function will copy the selected buttons (without the on/off class and events) to the new row. Adjust as necessary by adding additional classes to get the styling exactly the way you want. Note I recommend not setting the style property directly on the element as you are doing. It should be enough to use CSS to do this, perhaps using a rule with :nth-child to get the wrapping you need. See an updated fiddle at http://jsfiddle.net/YTh5Y/.

// make the counter global so that it isn't reset with each function call,
// though it looks like you could get it from an input on the page.  That
// or figuring out the next number from the existing rows would be better.
var qnum = 1;
function insertQuestion(form) {
    // make the row
    var $html = $("<tr><td class='qid'>" + qnum + "</td></tr>");
    // make the column element where the answers will go
    var $td = $("<td class='answer'></td>");
    // for each selected answer button, construct a new one and append it to the column
    $('#optionAndAnswer .answerBtnsOn').each( function() {
        var $this = $(this);
        var $newBtn = $("<input class='answerBtns' type='button' style='display: inline-block;' />").attr('name',$this.attr('name'))
                   .attr('value',$this.attr('value'))
                   .attr('id','qid' + qnum + '-' + $this.attr('id')); // must be unique
        $td.append($newBtn);
    });
    // add column to row
    $html.append($td);
    // add row to table and update counter
    $('#qandatbl').append($html);
    form.numberOfQuestions.value = qnum;

    ++qnum;
    $("#questionNum").text(qnum);
    form.questionText.value = "";

}