Jquery检索动态创建的元素的值 [英] Jquery retrieve values of Dynamically created elements

问题描述

我有一个带有表单的HTML页面。

表单有Div，它可以通过输入元素（比如文本框，收音机，复选框等等）动态地填充。

现在我想要 在Html页面中检索这些动态创建的元素的值 ，以便我可以将其提交到页面。

// HTML PAGE $ b

 < script type = 文本/ JavaScript的 > 
 $（function（）{
 populateQuestions（）; 
}）; 
 
 $（＃submit_btn）。click（function（）{
 //在这里验证并处理表单
 //如何检索值
 var optionSelected = $（input＃OptionSelected_1）。val（）; // does not work？
 
 // alert（optionSelected）; 
 postAnswer（qid，values） ; //提交值
 showNextQuestion（）; //再次填充Div问题新值
}）; 
 
 
< / script> 
 
< form action =name =frmQuestion> 
< div id =Questionsstyle =color：＃FF0000> 
 
< / div> 
  

//问题DIV生成脚本示例单选按钮

  // questionText问题文本
 //问题选项questionOptions 
 // **示例调用** 
 var question = createQuestionElement（1，MCQ，什么是ABCD ??，Opt1 $ Opt2 $ Opt3）; 
 question.appendTo（$（'＃Questions'））; 
 
 
函数createQuestionElement（id，type，questionText，questionOptions）{
 var questionDiv = $（'< div>）。attr（'id'，'Question' ）; 
 var divTitle = $（'< div>'）。attr（'id'，'问题标题'）。html（questionText）; 
 divTitle.appendTo（questionDiv）; 
 var divOptions = $（'< div>'）。attr（'id'，'Question Options'）; 
 createOptions（id，radio，questionOptions，divOptions）; 
 divOptions.appendTo（questionDiv）; 
返回questionDiv; 
 
 
函数createOptions（id，type，options，div）{
 var optionArray = options.split（$）; 
 //循环数组中的每个值。 
 $ .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 />）; 
} 
  

解决方案

您正在分割选项数组，因此您多次创建相同的输入：

 < input type ='radio'name ='OptionSelected_1'checked ='checked'value ='Opt1'> 
<输入类型='radio'name ='OptionSelected_1'value ='Opt2'> 
< input type ='radio'name ='OptionSelected_1'value ='Opt3'> 
  

您目前正在通过ID获取＃，而您想通过 name 获取并获取：checked item，像这样：

  var optionSelected = $（input [名称= OptionSelected_1]：检查）VAL（）; 
  

I have a html page with a form.
The form has Div which gets populated dynamically with Input elements like text box,radio,checkbox etc.

Now I want to retrieve the values of these dynamically created elements in the Html page,so that i can submit it to a 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 DIV generation script example radio buttons

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

解决方案

You are creating the same input multiple times, since you're splitting the option array, you're making this:

<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'>

You are currently fetching by ID with the #, instead you want to fetch by name and get the :checked item, like this:

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

这篇关于Jquery检索动态创建的元素的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！