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

Question

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;
        });
    });
}

@dreamweiver - I think that would be far to difficult since there are many other functions that are involved — Fizzix
– Fizzix, Commented Aug 16, 2013 at 11:22
I guess you can just include the relevant functions,which defines the scope of your prob — dreamweiver
– dreamweiver, Commented Aug 16, 2013 at 11:23
@dreamweiver - I'll give it my best and get back to you in a second — Fizzix
– Fizzix, Commented Aug 16, 2013 at 11:24
@fizzix, Do you get any errors in the console? Does it enter your last loop? Did you check if it correctly gets a reference to your inputs for each iterations? You can use your browser's debugging tool to do this by putting some break points, or simply putting some console.log lines in your code. E.g. console.log(qs); — plalx
– plalx, Commented Aug 16, 2013 at 11:37

plalx · Accepted Answer · 2013-08-16 13:20:40Z

2

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]); 
}

answered Aug 16, 2013 at 13:20

plalx

43.8k7 gold badges77 silver badges94 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related