Jquery 检索动态创建元素的值
我有一个带有表单的 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您正在多次创建相同的输入,因为您正在拆分选项数组,所以您正在这样做:
您当前正在使用
#
通过 ID 获取,而不是希望通过获取name
并获取:checked
项,如下所示:You are creating the same input multiple times, since you're splitting the option array, you're making this:
You are currently fetching by ID with the
#
, instead you want to fetch byname
and get the:checked
item, like this: