asked on

update input text box in table using jquery

Hi,
I have a table which has 5 rows and 2 columns. Ist column in each row has a text box and second column has a select box. when the user selects value from select box and click on button, it should update the data in the text box corresponding to that row.
<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 700px;" id="policyTab">
<tr>
                                    <td align="left" width="100" >
                                          <input maxlength="30" name="policyNumber1" size="30" type="text" class="policyNumber" /></td>
                                    <td width="200">
                                          <input maxlength="30" name="insured1" size="30" type="text" /></td>
                                    <td align="left" width="100">
                                          <select name="prodTypeDropDown1" size="1" class="pnSelect"><option selected="selected" value=""><option value="lpn">Life - New Business</option><option value="afpn">Annuity - FPA</option><option value="aspn">Annuity - SPA</option><option value="cepn">Conversion / Exchange</option></select></td>
                                    <td align="left" width="100">
                                          <input maxlength="30" name="amtCollected1" size="30" type="text" /></td>
                              </tr>

                        <tr>
                                    <td align="left" width="100" >
                                          <input maxlength="30" name="policyNumber2" size="30" type="text" class="policyNumber"/></td>
                                    <td width="200">
                                          <input maxlength="30" name="insured2" size="30" type="text" /></td>
                                    <td align="left" width="100">
                                          <select name="prodTypeDropDown2" size="1" class="pnSelect"><option selected="selected" value=""><option value="lpn">Life - New Business</option><option value="afpn">Annuity - FPA</option><option value="aspn">Annuity - SPA</option><option value="cepn">Conversion / Exchange</option></select></td>
                                    <td align="left" width="100">
                                          <input maxlength="30" name="amtCollected2" size="30" type="text" /></td>
                              </tr>

</table>
$('#policyTab > tbody > tr').each(function () {
var pn = $(this).find('select.pnSelect>option:checked').val();

if (pn !== undefined ) {
var dateTotal = "test";
$(this).find('input.class="policyNumber"').val(dateTotal);
}
});

the data is not getting updated to the policynumber text box. Please let me know how can i do this.

Thank you

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Sthokala

ASKER

Sorry, My code was not clear..I already had a button and onclick on button, I was calling below code

$('#policyTab > tbody > tr').each(function () {
var pn = $(this).find('select.pnSelect>option:checked').val();

if (pn !== undefined ) {
var dateTotal = "test";
$(this).find('input.class="policyNumber"').val(dateTotal);
}
});

The problem here is $(this).find('input.class="policyNumber"') not the button click, that is why I gave "B"

Thank you

Sthokala

ASKER

I changed my code from $(this).find('input.class="policyNumber"') to $(this).find('input.policyNumber'). This is the exact line which is having problem. Gary's code helped me to fix my issue. Sorry for the confusion.