Jquery - Get value from dynamically created inputs

Question

I'm stuck in trying to create a "quiz-generator".

I have a form were you can fill out answer alternatives for the quiz, but here you could also dynamically create new fields with new id's.

So its creating new inputs with id txtAnswer1,txtAnswer2 etc.

Here is the (not working) code to get the values:

    $("#AddNewQuiz").click(function () {
    var NewQuizAlts = $("#txtAnswer").val();
    var NewQuizQuestion = $("#NewQuizQuestion").val();
    var init = { 
        'questions': [ 
        {
       'question': NewQuizQuestion,
       'answersAlts': [NewQuizAlts,'Two','Three','Four'],
          'correctAnswer': 1
          } 
          ]
    }   

You see here it is only getting the static first value. But I would like to get all of the values created in a "loop" or something.

Anyone has got any ideas?

Thanks!

---

Thanks for the answers!

But I can't manage it to work!

I've tried this:

    $('input[id^="txtAnswer"]').each(function(input){
        var value = $('input[id^="txtAnswer"]').val();
        var id = $('input[id^="txtAnswer"]').attr('id');
        alert('id: ' + id + ' value:' + value);
        });

But is only giving me alerts (4 times) of the only the last created input. What can be wrong?

Thing is, this is what I would like to achive:

1.) Use the above code to get a list of all created inputs.

2.) Put them in a comma seperated list with the values like this:

    QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+''];

3.) And also have it generating more alternatives in the list depending on how many inputs that were created, so if I created 5 alternatives it will be:

    QuestionAlts = [''+Alt1+'',''+Alt2+'',''+Alt3+'',''+Alt4+'',''+Alt5+''];

I understand if it is a lot to ask for help with all this but a little bit is better than nothing :)

Thanks!

Answer 1

EDIT:

In this code, you're not properly using context. http://api.jquery.com/jQuery.each/

$('input[id^="txtAnswer"]').each(function(input){
        var value = $('input[id^="txtAnswer"]').val();
        var id = $('input[id^="txtAnswer"]').attr('id');
        alert('id: ' + id + ' value:' + value);
});

In your .each, what's passed to the function is an item in the array you pulled with your selector. When you set value = $('input..., you're pulling the same array all over again.

Use .each, this way:

$('your selector').each(function(index, item){
    var val = $(item).val();
    var id = $(item).attr('id');
    ...
});

Unless you need the answers to have ids, why not use data-* attributes to denote them as an answer? You can tag each one like this:

<input data-type="answer"/>

Then just pull them all in this manner:

$('input[data-type="answer"]')

Doing it this way removes concern about needing to make sure every dynamic id is unique, if they aren't important. I have a data filter I created for work that dynamically creates elements after the page is loaded and I have no problem pulling data from the DOM in this manner.