CODEWITHSUNDEEP
javascripthtmlinput
Fizzix
Fizzix

Reputation: 24375

How to insert a string into an array of text inputs?

Basically, I have a large string that i am splitting, then splitting again.

I then need to use the smallest split array to place its elements into text inputs on my page.

This is my Javascript

var splitquestions = vals[2].split('\n');

              //Loop to go through all current questions
              for (var i = 0; i < splitquestions.length - 1; i++) 
              {
                  //trigger a question add where a single question data can be added into
                  $( "#add" ).trigger('click');

                  //split current question into separate items
                  var s = splitquestions[i].split(',');

                  //Loop to go over all sections in a question
                  var count = 0;
                  for(var j = 0; j < s.length; j++)
                  {
                      count = count + 1;
                      var qs = document.getElementById('questions[' + j +'][' + count + ']').value;

                      qs = s[j];

                  }

              }

There will be many questions on the page, depending how many the user will like to add. Each new question block will consist of a question, 3 wrong answers, and 1 correct answer.

The part that is going wrong is within the last loop. This is where I need to grab each individual element within the 's' array, and place it within each text input.

This is how the raw data is displayed before it is split by the 'splitquestions' variable:

question1,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question2,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer
question3,incorrect-answer1,incorrect-answer2,incorrect-answer3,correct-answer

As you can see from above, each question is separated by a line-break, being \n, then each individual part is comma separated.

Each question input has a multidimensional variable assigned to its ID. For example, using the data above, the first line of data, along with the very first element (being question1) would be question[1][1]. Another example would be 'incorrect-answer1' on the third line of data, which would be question[3][2]. The first number is the question number, and the second number is the element number.

I hope that I've explained this well enough, since I am a little confused on how to explain it myself since I am new to multidimensional arrays and loops inside loops. So please, if you need any additional information, just post a comment and I'll do my best.

If needed, this is the function that creates the question elements dynamically:

function dynamicForm () {

    //set a counter
    var i = $('.dynamic-input#form-step2').length + 1;
    //alert(i);
    //add input
    $('a#add').click(function () {
        $('<table><tr><td><p><span class="left"><input type="text" class="dynamic-input" name="questions[' +i +'][1]" id="' + i + '" placeholder="Question" /></span>' + '<span class="right"><input type="text" class="dynamic-input" name="questions[' +i +'][2]" id="' + i + '" placeholder="Distraction 1" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][3]" id="' + i + '" placeholder="Distraction 2" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][4]" id="' + i + '" placeholder="Distraction 3" /><br /><input type="text" class="dynamic-input" name="questions[' +i +'][5]" id="' + i + '" placeholder="Correct Answer" /><br /><a href="#">Remove</a></span></p></td></tr></table>').fadeIn("slow").appendTo('#extender');
        i++;

        $("a:contains('Remove')").click(function () {
                $(this).parent().parent().remove();
        });

        return false;
    });


    //fadeout selected item and remove
    $("#form-step2.dynamic-input").on('click', 'a', function () {
        $(this).parent().fadeOut(300, function () {
            $(this).empty();
            return false;
        });
    });
}

Upvotes: 0

Views: 349

Answers (1)

plalx
plalx

Reputation: 43718

After further discussions with the OP, we fixed the code ended up being what's below. Basically, his input numbers are starting at index 1 instead of 0, so that was one of the issues. He was also trying to select by id while the inputs in question only had a name attribute.

//Loop to go over all sections in a question
for (var j = 1, len = s.length; j <= len; j++) { 
    $('input[name="questions[' + (i + 1) + '][' + j + ']"]').val(s[j - 1]); 
}

Upvotes: 2

Related Questions