Question

Follow-Up to: when text changed inputbox automatically updates next 6 text boxes.

I have 7 textboxes. If Top 1 textbox(Volume All Years) text changed, text need to be updated in next 6 inputboxes(Latest 2009 Volume to Latest 2014 Volume). I need javascript or Jquery for this. I will write Js textchanged() or focuschange() for top 1 textbox. So what should I write in focuschage() or textchanged methods().

I changed little bit in code. Now Html will like below. These textboxes have common CssClass. volumetextbox. Can we use this class and change text in all textboxes those have same CssClass.

<tr id="row12_136" class="RegText">
   <td style="width:420px;Padding-right:20px;">Volume All Years</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_136" tabindex="61" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>
<tr id="row12_60" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2009 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_60" tabindex="56" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>
<tr id="row12_61" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2010 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_61" tabindex="57" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>
<tr id="row12_62" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2011 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_62" tabindex="58" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>
<tr id="row12_63" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2012 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_63" tabindex="59" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>
<tr id="row12_64" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2013 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_64" tabindex="60" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>

<tr id="row12_65" class="RegText">
   <td style="width:420px;Padding-right:20px;">Latest 2014 Volume</td> 
   <td style="width:420px;Padding-left:0px;">
       <input name="12_136" type="text" maxlength="255" id="12_65" tabindex="61" title="Volume All Years" class="volumetextbox" OnKeyPress="javascript:FocusChange();" style="width:300px;" />
    </td>

Answer 1

Perhaps an approach like this (not tested):

$(document).ready( function(){
    $('input.volumetextbox:first').change( function(){
        var firstVal = $(this).val()
        $('input.volumetextbox:not(:first)').val( firstVal )
    })
})