I have a code below where it displays a text input in one column, the total marks column in the second column and the marks remaining in the last column. The table looks like this below:
Marks Per Answer Total Marks Marks Remaining
(blank text input) 4 4
(blank text input) 6 6
(blank disabled text input) 4 4
But the problem I have is that if the READONLY text input is empty, it should display a value of the “Total Marks” column (so 4 for the readonly text input in the example above).
Also the readonly text input contains the number of total marks, under the “Marks Remaining” column, this is incorrect, for this row it should display 0. (as for the readonly text input contains a value of 4 so if we minus that with 4 under Total marks, it should make 0 for Marks Remaining for the disabled text input row.)
So the table should really look like this below when the user accesses the page:
Marks Per Answer Total Marks Marks Remaining
(blank text input) 4 4
(blank text input) 6 6
(readonly text input = 4 (same value as under Total Marks)) 4 0
My question is that how can both steps above be solved by changing the jquery below:
$(function () {
//alert("here");
var questions = $('#markstbl td[class*="_ans"]').length;
//disable single entry
for (var i=0;i<=questions;i++){
if ($("[class*=q" + i + "_mark]").length == 1) {
//alert(t_marks);
var t_marks = $("[class*=q" + i + "_ans]");
var t_marksHtml = t_marks.html();
t_marks.html("0");
$("[class*=q" + i + "_mark]").val(t_marksHtml).attr('readonly', true);
//$("[class*=q"+i+"_mark]").attr('readonly',true);
}
}
//find each question set and add listeners
for (var i = 0; i <= questions; i++) {
$('input[class*="q' + i + '"]').keyup(function () {
var cl = $(this).attr('class').split(" ")[1]
var questionno = cl.substring(cl.indexOf('q') + 1, cl.indexOf('_'));
var tot_marks = $(".q" + questionno + "_ans_org").val();
//alert(tot_marks);
var ans_t = 0;
$("[class*=q" + questionno + "_mark]").each(function () {
var num = (isNaN(parseInt($(this).val()))) ? 0 : parseInt($(this).val());
ans_t += parseInt(num);
});
ans_t = tot_marks - ans_t;
//alert(ans_t);
//var fixedno = tot_marks;
var ans = ans_t;
var answerText = '<strong>' + ans + '</strong>';
$(".q" + questionno + "_ans").val(ans);
$(".q" + questionno + "_ans_text").html(answerText);
});
}
});
Below is the dynamic HTML table:
<form id="Marks" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<table border='1' id='markstbl'>
<thead>
<tr>
<th class='questionth'>Question No.</th>
<th class='questionth'>Question</th>
<th class='answerth'>Answer</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='totalmarksth'>Total Marks</th>
<th class='noofmarksth'>Marks Remaining</th>
</tr>
</thead>
<tbody>
<?php
$row_span = array_count_values($searchQuestionId);
$prev_ques = '';
foreach($searchQuestionId as $key=>$questionId){
?>
<tr class="questiontd">
<?php
if($questionId != $prev_ques){
?>
<td class="questionnumtd" name="numQuestion" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$questionId?> <input type="hidden" name="q<?php echo$questionId?>_ans_org" class="q<?php echo$questionId?>_ans_org" value="<?php echo$searchMarks[$key]?>"><input type="hidden" name="q<?php echo$questionId?>_ans" class="q<?php echo$questionId?>_ans" value="<?php echo$searchMarks[$key]?>"></td>
<td class="questioncontenttd" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$searchQuestionContent[$key]?> </td>
<?php
}
?>
<td class="answertd" name="answers[]"><?php echo$searchAnswer[$key]?></td>
<td class="answermarkstd">
<input class="individualMarks q<?php echo$questionId?>_mark_0" q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<?php
if($questionId != $prev_ques){
?>
<td class="totalmarkstd" rowspan="<?php echo$row_span[$questionId]?>"><?php echo$totalMarks[$key]?></td>
<td class="noofmarkstd q<?php echo$questionId?>_ans_text" q_group="1" rowspan="<?php echo$row_span[$questionId]?>"><?php echo"<strong>".$searchMarks[$key]."</strong>"?></td>
<?php
}
?>
</tr>
<?php
$prev_ques = $questionId;
}
?>
</tbody>
</table>
</form>
At the moment in the jquery function I am trying to use the t_marks variable to display the value in the text input but nothing is displayed when I alert t_marks
UPDATE:
Complete HTML:
<table border='1' id='markstbl'>
<thead>
<tr>
<th class='questionth'>Question No.</th>
<th class='questionth'>Question</th>
<th class='answerth'>Answer</th>
<th class='answermarksth'>Marks per Answer</th>
<th class='totalmarksth'>Total Marks</th>
<th class='noofmarksth'>Marks Remaining</th>
</tr>
</thead>
<tbody>
<tr class="questiontd">
<td class="questionnumtd" name="numQuestion" rowspan="2">1 <input type="hidden" name="q1_ans_org" class="q1_ans_org" value="5"><input type="hidden" name="q1_ans" class="q1_ans" value="5"></td>
<td class="questioncontenttd" rowspan="2">Here are 2 answers </td>
<td class="answertd" name="answers[]">B</td>
<td class="answermarkstd">
<input class="individualMarks q1_mark_0" q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<td class="totalmarkstd" rowspan="2">5</td>
<td class="noofmarkstd q1_ans_text" q_group="1" rowspan="2"><strong>5</strong></td>
</tr>
<tr class="questiontd">
<td class="answertd" name="answers[]">D</td>
<td class="answermarkstd">
<input class="individualMarks q1_mark_0" q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
</tr>
<tr class="questiontd">
<td class="questionnumtd" name="numQuestion" rowspan="1">2 <input type="hidden" name="q2_ans_org" class="q2_ans_org" value="5"><input type="hidden" name="q2_ans" class="q2_ans" value="5"></td>
<td class="questioncontenttd" rowspan="1">Here is a single answer </td>
<td class="answertd" name="answers[]">True</td>
<td class="answermarkstd">
<input class="individualMarks q2_mark_0" q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<td class="totalmarkstd" rowspan="1">5</td>
<td class="noofmarkstd q2_ans_text" q_group="1" rowspan="1"><strong>5</strong></td>
</tr>
</tbody>
</table>
So I THINK this should be all you need: