CODEWITHSUNDEEP
jqueryforms
Kim
Kim

Reputation: 1156

Jquery - Get value from dynamically created inputs

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!

Upvotes: 8

Views: 41494

Answers (3)

ysrb
ysrb

Reputation: 6740

You can do this:

$('input').each(function(input){
   var value = $(input).value();
   var id = $(input).attr('id');
   console.log('id: ' + id + ' value:' + value);
});

Try this:

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

Upvotes: 4

Buchannon
Buchannon

Reputation: 1691

If all you want to do is loop through inputs, try something like this:

$('input').each(function() { alert(this.val()); });

That will loop through EVERY input field on your page.

You can filter it further by defining [type=text] or even using regular expressions to get certain text fields starting with certain Ids (e.g. "match any text field with an ID starting with "txtAnswer" followed by a number).

Try this:

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

Upvotes: 3

Yatrix
Yatrix

Reputation: 13775

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.

Upvotes: 14

Related Questions