1
如果这是一个常见的问题，请不要介意。我是一个JavaScript的初学者。 我写了一段JavaScript代码来比较每个表单与每个保存在数据库中的ans的相等性。但是当我运行代码时，它只检查最后一个。和其他人显示为不匹配。我希望它可以在任何形式下工作，并将其与相对答案数据库列进行比较。 代码放在这里.......关于输入javascript验证只能在最后一个
<h1>Listing questions</h1>
<div align="center">
<table class="table table-bordered" style="width:30%" bgcolor="#00FF00" >
<thead>
<tbody >
<% @questions.each do |question| %>
<%= form_for question do |f| %>
<tr>
<td><%= question.q1 %></td>
<td>=</td> <%= f.hidden_field :ans1, :id=>"ans1" %>
<td><%= f.text_field :a1, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q2 %></td>
<td>=</td> <%= f.hidden_field :ans2, :id=>"ans2" %>
<td><%= f.text_field :a2, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q3 %></td>
<td>=</td> <%= f.hidden_field :ans3, :id=>"ans3" %>
<td><%= f.text_field :a3, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q4 %></td>
<td>=</td> <%= f.hidden_field :ans4, :id=>"ans4" %>
<td><%= f.text_field :a4, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q5 %></td>
<td>=</td> <%= f.hidden_field :ans5, :id=>"ans5" %>
<td><%= f.text_field :a5, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q6 %></td>
<td>=</td> <%= f.hidden_field :ans6, :id=>"ans6" %>
<td><%= f.text_field :a6, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q7 %></td>
<td>=</td> <%= f.hidden_field :ans7, :id=>"ans7" %>
<td><%= f.text_field :a7, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q8 %></td>
<td>=</td> <%= f.hidden_field :ans8, :id=>"ans8" %>
<td><%= f.text_field :a8, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q9 %></td>
<td>=</td> <%= f.hidden_field :ans9, :id=>"ans9" %>
<td><%= f.text_field :a9, :oninput => "check(this)" %> </td>
</tr>
<tr>
<td><%= question.q10 %></td>
<td>=</td> <%= f.hidden_field :ans10, :id=>"ans10" %>
<td><%= f.text_field :a10, :oninput => "check(this)" %> </td>
</tr>
<%end%>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= will_paginate @questions, renderer: BootstrapPagination::Rails %>
</div>
<script language='javascript' type='text/javascript'>
function check(input) {
if (input.value != document.getElementById('ans1').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans2').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans3').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans4').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans5').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans6').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans7').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans8').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans9').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
function check(input) {
if (input.value != document.getElementById('ans10').value) {
input.setCustomValidity('incorrect');
$("p").hide();
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
解析的HTML会更有意义.. – Rayon