CODEWITHSUNDEEP
jquerygridviewtextboxonkeypress
ACP
ACP

Reputation: 35268

Jquery + Update one textbox from another textbox inside a gridview

Consider a gridview row containing two columns... Each column has two textboxes... Onkeypress in the first textbox i have to update a value in the second textbox..... Is it possible with jquery....

EDIT: Grid http://img85.imageshack.us/img85/4044/gridp.jpg

I want to show Closing Advance based on Advance Detucted textbox keypress

ClosingAdvance=OpeningADvance-AdvanceDetucted....

<table class="grid-view" id="ctl00_ContentPlaceHolder1_gridEmployee" style="border: 0px none rgb(244, 242, 242); border-collapse: collapse;" border="0" cellspacing="0" rules="all">
        <tbody><tr class="gridHeaderimg">
            <th scope="col" style="width: 10%;">

                      Name
                    </th><th scope="col" style="width: 10%;">
                    Salary Basis
                    </th><th scope="col" style="width: 12%;">
                      Salary Per Day
                    </th><th scope="col" style="width: 12%;">
                     No of Days Present
                    </th><th scope="col" style="width: 12%;">
                     Opening Advance
                    </th><th scope="col" style="width: 12%;">
                     Advance Detucted
                    </th><th scope="col" style="width: 12%;">

                     Closing Advance
                    </th><th scope="col" style="width: 10%;">
                     Salary Given
                    </th>
        </tr><tr class="normal">
            <td class="GridCs" style="width: 10%;" align="left">
                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_LblEmpName">Natarajan</span>
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl02$HiddenId" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_HiddenId" value="16" type="hidden">
                    </td><td class="GridCs" style="width: 10%;" align="left">

                   <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_LblSalary">Weekly</span>
                  </td><td class="GridCs" style="width: 12%;" align="left">
                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_LblSalaryPerDay">150.00</span>

                  </td><td style="width: 12%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl02$TxtDaysPresent" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_TxtDaysPresent" class="text_box_height_14_width_50" type="text">

                  </td><td class="GridCs" style="width: 12%;" align="left">
                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_LblOpeningAdv">500.00</span>

                  </td><td style="width: 12%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl02$TxtAdvanceDeducted" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$gridEmployee$ctl02$TxtAdvanceDeducted\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_TxtAdvanceDeducted" class="text_box_height_14_width_50" type="text">

                  </td><td style="width: 12%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl02$TxtClosingAdvance" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_TxtClosingAdvance" class="text_box_height_14_width_50" type="text">
                  </td><td style="width: 10%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl02$TxtSalary" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl02_TxtSalary" class="text_box_height_14_width_50" type="text">

                  </td>
        </tr><tr class="alternate">
            <td class="GridCs" style="width: 10%;" align="left">

                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_LblEmpName">Pandian</span>
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl03$HiddenId" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_HiddenId" value="17" type="hidden">
                    </td><td class="GridCs" style="width: 10%;" align="left">
                   <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_LblSalary">Weekly</span>
                  </td><td class="GridCs" style="width: 12%;" align="left">
                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_LblSalaryPerDay">122.00</span>

                  </td><td style="width: 12%;" align="center">

                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl03$TxtDaysPresent" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_TxtDaysPresent" class="text_box_height_14_width_50" type="text">

                  </td><td class="GridCs" style="width: 12%;" align="left">
                      <span id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_LblOpeningAdv">0.00</span>
                  </td><td style="width: 12%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl03$TxtAdvanceDeducted" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$gridEmployee$ctl03$TxtAdvanceDeducted\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_TxtAdvanceDeducted" class="text_box_height_14_width_50" type="text">

                  </td><td style="width: 12%;" align="center">
                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl03$TxtClosingAdvance" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_TxtClosingAdvance" class="text_box_height_14_width_50" type="text">
                  </td><td style="width: 10%;" align="center">

                      <input name="ctl00$ContentPlaceHolder1$gridEmployee$ctl03$TxtSalary" id="ctl00_ContentPlaceHolder1_gridEmployee_ctl03_TxtSalary" class="text_box_height_14_width_50" type="text">

                  </td>
        </tr>
    </tbody></table>

Upvotes: 0

Views: 2902

Answers (2)

ACP
ACP

Reputation: 35268

I tried using Javascript and got the answer,

function totalAmount(e, obj) {

    var tbl = document.getElementById('ctl00_ContentPlaceHolder1_gridEmployee');
    var tblRows = tbl.rows.length;
    var result = 0;
    var str1;
    if (obj != null) {
        str1 = obj.id;
    } else {
        str1 = this.id;
    }
    var Splitstr = str1.split('_');
    var lastChar = Splitstr[3].substring(3, Splitstr.length);
    if (str1 == 'ctl00_ContentPlaceHolder1_gridEmployee_ctl' + lastChar + '_TxtAdvanceDeducted') {
        var str2 = 'ctl00_ContentPlaceHolder1_gridEmployee_ctl' + lastChar + '_txtOpeningAdv';
        var str3 = 'ctl00_ContentPlaceHolder1_gridEmployee_ctl' + lastChar + '_TxtClosingAdvance';
        var txtDeduct = document.getElementById(str1).value;
        var txtOpenAdv = document.getElementById(str2).value;
        var txtCloAdv = document.getElementById(str3).value;
        var totRes = txtOpenAdv - txtDeduct;
        document.getElementById(str3).value = totRes.toFixed(2)
    }

}

Upvotes: 0

Tom Bartel
Tom Bartel

Reputation: 2258

You still haven't provided any markup, so I have to make some assumptions. Assumption 1: "Advance Deducted" input fields have the class "adv-ded". Assumption 2: tds containing an opening advance have a class "adv-open". Assumption 3: "Closing advance" input has class "adv-close".

$('input.adv-ded').live('keypress', function(e) {
    var val;
    try {
        val = parseFloat($(this).val());
        if (val) {
            var tr = $(this).closest('tr');
            var open = parseFloat(tr.find('td.adv-open').text());
            tr.find('input.adv-close').val(open - val);
        }
    } catch (e) {

    }
});

Something like this. You might have to add some code for the formatting, but this should convey the general idea.

Upvotes: 1

Related Questions