无法从输入字段使用$获取数据(),这将导致400错误
问题描述:
I'have一个复杂的HTML形式向导上的每一步,我有一些表单输入字段提交的数据,因为我有
<form class="uk-form-stacked" id="wizard_advanced_form">
<div id="wizard_advanced" data-uk-observe>
<c:forEach var="i" begin="1" end="${quizTotalQuestions}">
<!-- first section -->
<h3></h3>
<section>
<h2 class="heading_a">
Question number ${i} :
</h2>
<hr class="md-hr"/>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_fullname">Write question number ${i} here...<span class="req">*</span></label>
<textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option a<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_one" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option b<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_two" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option c<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_three" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option d<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_four" required class="md-input" />
</div>
</div>
<h2 class="heading_a">
Correct answer:
</h2>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<select id="wizard_birth_place" name="wizard_birth_place" required>
<option value="">Select answer for question ${i}</option>
<option value="a">option a</option>
<option value="b">option b</option>
<option value="c">option c</option>
<option value="d">option d</option>
</select>
</div>
</div>
</section>
</c:forEach>
</div>
</form>
所以如果有${quizTotalQuestions} = 2
页面放出来是
<form class="uk-form-stacked" id="wizard_advanced_form">
<div id="wizard_advanced" data-uk-observe>
<h3></h3>
<section>
<h2 class="heading_a">
Question number 1 :
</h2>
<hr class="md-hr"/>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_fullname">Write question number 1 here...<span class="req">*</span></label>
<textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option a<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_one" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option b<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_two" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option c<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_three" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option d<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_four" required class="md-input" />
</div>
</div>
<h2 class="heading_a">
Correct answer:
</h2>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<select id="wizard_birth_place" name="wizard_birth_place" required>
<option value="">Select answer for question 1</option>
<option value="a">option a</option>
<option value="b">option b</option>
<option value="c">option c</option>
<option value="d">option d</option>
</select>
</div>
</div>
</section>
<h3></h3>
<section>
<h2 class="heading_a">
Question number 2 :
</h2>
<hr class="md-hr"/>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_fullname">Write question number 2 here...<span class="req">*</span></label>
<textarea id="wizard_fullname" class="md-input" id="question_text" required></textarea>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option a<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_one" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option b<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_two" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option c<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_three" required class="md-input" />
</div>
</div>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<label for="wizard_address">Option d<span class="req">*</span></label>
<input type="text" name="wizard_address" id="option_four" required class="md-input" />
</div>
</div>
<h2 class="heading_a">
Correct answer:
</h2>
<div class="uk-grid">
<div class="uk-width-medium-1-1 parsley-row">
<select id="wizard_birth_place" name="wizard_birth_place" required>
<option value="">Select answer for question 2</option>
<option value="a">option a</option>
<option value="b">option b</option>
<option value="c">option c</option>
<option value="d">option d</option>
</select>
</div>
</div>
</section>
</div>
</form>
请看看形式的剪断这是
每个<section>
用于获取在我的情况简单的问题的细节,这意味着更多的<section>
因为在这一点上${quizTotalQuestions}
数目增加的创建,当我在接下来点击我要提交并保存说单一的问题,所以对于接下来有功能
onStepChanged: function(i, e) {
altair_wizard.content_height(t, e), setTimeout(function() {
$window.resize()
}, 100);
console.log("Next is pressed");
}
onStepChanging: function(i, e, a) {
var n = t.find(".body.current").attr("data-step"),
r = $('.body[data-step="' + n + '"]');
$.ajax({
contentType : 'application/json; charset=utf-8',
type: 'POST',
url: '/imtehan/question/',
dataType : 'json',
data : {'questionText' : $("#question_text").val()},
success : function(callback){
console.log("Data is ==> " + $("#question_text").val());
console.log("Data inserted");
},
error : function(){
console.log("Error");
}
});
console.log("Data is" + $("#qu estion_text").val());
console.log("Next is being pressed");
return r.find("[data-parsley-id]").each(function() {
$(this).parsley().validate()
}), $window.resize(), r.find(".md-input-danger").length ? !1 : !0
},
onFinished: function() {
$.ajax({
contentType : 'application/json; charset=utf-8',
type: 'POST',
url: '/imtehan/question/',
dataType : 'json',
data : {'questionText' : $("#question_text").val()},
success : function(callback){
console.log("Data is ==> " + $("#question_text").val());
console.log("Data inserted");
},
error : function(){
console.log("Error");
}
});
console.log("Finish Pressed");
}
,但问题是,当我按接下来数据没有提交,在控制台收到错误。
Data is ==> undefined
Failed to load resource: the server responded with a status of 400 (Bad Request)
我想我得到,因为没有数据从$("#question_text").val()
得到的错误我如何能得到的东西的工作。
答
我还不能评论。 = /(新用户)
您是否看到在HTML中有多个#question_text
?
是的,可能是这个问题,因为是动态创建的,不幸的是没有任何想法来处理这个问题...... –
在所有问题字段中创建一个类名,所以,你可以尝试调用类似' $( “QUESTION_TEXT。”)最后()VAL();' –