How to display a value in readonly text input using jquery

Question

Below is an example of a table I have displayed in my application:

Marks Per Answer               Total Marks    Marks Remaining

(blank text input)              
(blank text input)               6              6           

(blank readonly text input)      4              0

The problem I have is that what is supose to happen is that any readonly text inputs in the table should display the same value as the number under "Total Marks" column. So the table should look like this below:

Marks Per Answer                   Total Marks    Marks Remaining

(blank text input)                    
(blank text input)                    6              6

(readonly text input value='4')       4              0

My question is that what do I need to change in my code below in order to display the correct values in the read only text inputs?

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);
}

Below is the HTML:

<table border='1' id='markstbl'>
<thead>
<tr>
<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="answermarkstd">
<input class="individualMarks q1_mark_0"  q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<td class="totalmarkstd" rowspan="2">6</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="answermarkstd">
<input class="individualMarks q2_mark_0"  q_group="1" name="answerMarks[]" id="individualtext" type="text" />
</td>
<td class="totalmarkstd" rowspan="1">6</td>
<td class="noofmarkstd q2_ans_text"  q_group="1" rowspan="1"><strong>5</strong></td>
</tr>
</tbody>
</table>

"any readonly text inputs in the table should display" - But there are no readonly ones in your html, only what you're setting to readonly in your JS - could you explain more about which ones you want to set readonly? Also, your html is invalid: id should be unique, so you should be using id for the qx_mark_0 instead of making that a style. — nnnnnn
– nnnnnn, Commented Dec 2, 2012 at 2:12
This: $('#markstbl input[readonly]').val(function(i, oldVal) {return $(this).closest("tr").find(".totalmarkstd").text(); }); will find any fields that are already readonly and set their value to the total marks value from the same table row... — nnnnnn
– nnnnnn, Commented Dec 2, 2012 at 2:20
seems you missleading question: jsfiddle.net/oceog/aAjmW no any problem to set text to readonly input — zb'
– zb', Commented Dec 2, 2012 at 2:22
I have not included whole jquery functionand full html in my code, but what I am trying to do is state that if a question only contains a sigle answer, then the text input for that question should be readonly, else if there are multiple answers in a question, then the text inputs in that question is not readonly — user1861818
– user1861818, Commented Dec 2, 2012 at 2:30

zb' · Accepted Answer · 2012-12-02 07:32:50Z

Seems you need something like this, because of ugly markup of table (with span) it is hard to select the proper number of remain marks, so here a bug that allow -1 , all other works fine,

You need to review your markup, because relations between input and remain marks are unclean.

sample

$('.individualMarks').change(function() {
    t = $(this);
    console.log(t.parents('tr').get(0));
    var remain_e = t.parents('tr').children('.noofmarkstd').last().children();
    console.log(remain_e.get(0));
    if (remain_e.length < 1) {
        var c = 2;
        var m = $(this);
        while (remain_e.length < 1 && c < 100) {

            remain_e = m.parents('tr').prev().children('.noofmarkstd').last().children();
            m = m.parents('tr').prev();
            c++;
        }
        if (c >= 100) {
            console.error('error finding element!');
            return;
        }
    }
    remain = remain_e.html();
    remain--;
    if (remain <= 0) {
        t.attr('readonly', "true"), remain_e.parents('tr').find('input').attr('readonly', "true")
    };
    remain_e.html(remain);
});

Collectives™ on Stack Overflow

How to display a value in readonly text input using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related