Jquery récupère les valeurs des éléments créés dynamiquement

Question

J'ai une page html avec un formulaire.
La forme a Div qui obtient de manière dynamique, avec des éléments d'entrée comme zone de texte, radio, case à cocher, etc.

Maintenant, je veux récupérer les valeurs de ces éléments dynamiquement créés dans la page Html, de sorte que i peut le soumettre à une page.

// HTML PAGE

<script type="text/javascript"> 
     $(function() { 
      populateQuestions(); 
     });  

     $("#submit_btn").click(function() { 
      // validate and process form here 
      //HOW TO ??retrieve values??? 
      var optionSelected = $("input#OptionSelected_1").val();// doesn't work? 

      // alert(optionSelected); 
      postAnswer(qid,values);//submit values 
      showNextQuestion() ;// populate Div Questions again new values 
     }); 


    </script> 

    <form action="" name="frmQuestion"> 
    <div id="Questions" style="color: #FF0000"> 

    </div> 

// Question script de génération DIV exemple des boutons radio

//questionText text of question 
//option for question questionOptions 
// **sample call** 
var question = createQuestionElement("1","MCQ", "WHAT IS ABCD??", "Opt1$Opt2$Opt3"); 
question.appendTo($('#Questions')); 


function createQuestionElement(id, type, questionText, questionOptions) { 
    var questionDiv = $('<div>').attr('id', 'Question'); 
    var divTitle = $('<div>').attr('id', 'Question Title').html(questionText); 
    divTitle.appendTo(questionDiv);  
    var divOptions = $('<div>').attr('id', 'Question Options');  
    createOptions(id, "radio", questionOptions, divOptions); 
    divOptions.appendTo(questionDiv); 
    return questionDiv; 
} 

function createOptions(id, type, options, div) { 
    var optionArray = options.split("$"); 
    // Loop over each value in the array. 
    $.each(
optionArray, function(intIndex, objValue) { 
    if (intIndex == 0) { 
     div.append($("<input type='" + type + "' name='OptionSelected_" + id + "' checked='checked' value='" + objValue + "'>")); 
    } else { 
     div.append($("<input type='" + type + "' name='OptionSelected_" + id + "' value='" + objValue + "'>")); 
    } 
    div.append(objValue); 
    div.append("<br/>"); 
} 

Answer 1

Vous créez la même entrée plusieurs fois, puisque vous partagez la tableau d'options, vous faites ceci:

<input type='radio' name='OptionSelected_1' checked='checked' value='Opt1'> 
<input type='radio' name='OptionSelected_1' value='Opt2'> 
<input type='radio' name='OptionSelected_1' value='Opt3'> 

Vous récupérez actuellement par ID avec le #, au lieu que vous voulez chercher par name et obtenir l'élément :checked, comme ceci:

var optionSelected = $("input[name=OptionSelected_1]:checked").val();