Jquery 检索动态创建元素的值

发布于 2024-08-25 06:31:05 字数 2166 浏览 7 评论 0原文

我有一个带有表单的 html 页面。
该表单有 Div,它会动态填充输入元素,如文本框、单选框、复选框等。

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

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

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

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

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

草莓酥 2024-09-01 06:31:05

您正在多次创建相同的输入,因为您正在拆分选项数组,所以您正在这样做:

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

您当前正在使用 # 通过 ID 获取,而不是希望通过 获取name 并获取 :checked 项,如下所示:

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

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();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文