CODEWITHSUNDEEP
javascriptjqueryfor-loop
f00d
f00d

Reputation: 581

Dynamically load Two Questions into separate forms as well as their appropriate answer options

I'm trying to have a button, that once pressed. Dynamically loads Two Questions (question1, and question2) into separate forms. But it also contains the questions 3 Answers to choose from. Currently my for loop adds an additional set of 3 answers(question 2's answers) to choose from to Question 1

OUTPUT Looks like the following :

It needs to be QUESTION 1 (YES, NO, OTHER) and QUESTION 2 (YES2, NO2, OTHER2)

image example

CODE

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="center col-xs-12">
        <button class="contentBtn btn"><label for="contentBtn">CONTENT</label></button>
    </div>
    <div class="row-2 center col-xs-12"></div>
    <script src="js/jquery-1.11.3.min.js" type='text/javascript'>
    </script> 
    <script>
    $('.contentBtn').click(function(){
        var contentArray = [

        ["QUESTION1?", "YES", "NO", "OTHER"],
        ["QUESTION2?", "YES2", "NO2", "OTHER2"]
        ];

    for (var i = 0; i < contentArray.length; i++){
    $('.row-2').append("<form><span class='question'>" + contentArray[i][0] + "<\/span><br>")
    for (var x = 1; x < 4; x++){
    $('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
    }
    $('.row-2').append("<\/form><br>");
    }
    });

    </script>
</body>
</html>

Upvotes: 1

Views: 36

Answers (2)

Victoria French
Victoria French

Reputation: 766

The short answer is that you are appending 'form', meaning you are appending every form on the DOM. The code is also corrupting the DOM. The inputs are not closed, and append should never be done in partials like given in the example.

// Always favor the 'on' events instead of the 'click' events.
$('.contentBtn').on('click', function () {
    var contentArray = [
        ['QUESTION1?', 'YES', 'NO', 'OTHER'],
        ['QUESTION2?', 'YES2', 'NO2', 'OTHER2']
    ];

    // we are going to use a for each on the first item, 
    // we could use a for as well but it just is really messy. 
    // remember that variables are defined at function scope, not block scope.
    $(contentArray).each(function (index, item) {
        // our item in the array is directly coming in to us now.
        // do not add incomplete html blocks to the dom, always 
        // create them and then add them!
        var newContent = $('<form><span class="question">' + 
              item[0] + '</span><br></form><br>');

        // now we will foreach, but instead of going by a length of 4, 
        // I am looking at the actual length of the array.
        for (var i = 1; i < item.length; i++) {

            // we are going to precreate our dom object.
            var answerContent = $('<input type="radio" value="' + 
                  item[i] + '">' + item[i] + '</input>');

            // now we are going to append the object to our form object.
            newContent.append(answerContent);
        }

        // now that the structure is complete we will append the browser dom.
        $('.row-4').append(newContent);
     });
});

I have created a corrected fiddle with comments for you. https://jsfiddle.net/t9h91nbk/

Hope this helps.

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

The problem is in this line :

$('form').append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");

The javascript can't detect wich form you want to append input to it so it will append to all the forms in page, so you have to add an identifier to the form you create.

I'll add class to identify each form and append the input using this identifiers :

$('.row-2').append("<form class='form_"+i+"'><span class='question'>" + contentArray[i][0] + "</span><br>")
for (var x = 1; x < 4; x++){
     $('.form_'+i).append("<input type='radio' value='" + contentArray[i][x] + "'>" + contentArray[i][x] + "");
}

Hope this helps.

Working fiddle

Upvotes: 1

Related Questions