How to display a value within a disabled text input

Question

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
(disabled 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){
var t_marks = $("[class*=q"+i+"_ans]").html();
//alert(t_marks);
$("[class*=q"+i+"_mark]").val(t_marks).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

Adil · Accepted Answer · 2012-11-28T15:33:56.317

1

You can use readonly instead of disabled

Change

$("[class*=q"+i+"_mark]").val(t_marks).attr("disabled","disabled");

To

$("[class*=q"+i+"_mark]").val(t_marks).attr('readonly',true);

edited Nov 28 '12 at 15:33

answered Nov 28 '12 at 15:28

Adil

146,340
25
209
204

I have tried changing it to read only but it still does not display a value within the readonly text box. Can you see what I am doing wrong in the jquery coz like I mentioned, when I try to aleart `_marks it does not display any number in the aleartwhich says to me it is not able to retrieve the value – user1830984 Nov 28 '12 at 17:06
I made an example to check if we can assign text to readonly http://jsfiddle.net/mJxMb/ – Adil Nov 28 '12 at 17:14
It must be something wrong with the t_marks variable because I have updated your fiddle and it still makes the change [fiddle](http://jsfiddle.net/mJxMb/). Can you see if there is anything wrong with jquery code? I have included the full jquery code above as well as full php/html code – user1830984 Nov 28 '12 at 17:33
You need to use debugger to see whats happening, You may try this http://getfirebug.com/javascript or http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome – Adil Nov 29 '12 at 04:27
I have to go somewhere and wil be back later on tonight. I will do some debugging when I get back and let you know what is happening – user1830984 Nov 29 '12 at 17:03
I am not receiving any errors in my error console on firefox. I have firebug in firefox but which tab shall I go on to debug this to see if there are any errors? – user1830984 Nov 30 '12 at 01:58
I use chrome debugger of VS debugger, remember to put break point and debug and check the value of variables. You can try this http://getfirebug.com/javascript – Adil Nov 30 '12 at 04:21

score 0 · Answer 2 · answered Nov 28 '12 at 15:32

0

Or You can just make it focus out when it get focus

<input type="text" id="myTxt" onfocus="$(this).blur()"/>

answered Nov 28 '12 at 15:32

Akhil Sekharan

12,467
7
40
57

What will the jquery need to be editted to in order to do this? – user1830984 Nov 28 '12 at 17:07

How to display a value within a disabled text input

2 Answers2