Lorsque le texte est modifié, la boîte de saisie met automatiquement à jour les zones de texte suivantes?

Question

Suivi de:when text changed inputbox automatically updates next 6 text boxes.

J'ai 7 zones de texte. Si Top 1 zone de texte (Volume tous les ans) le texte a été modifié, le texte doit être mis à jour dans les 6 prochaines boîtes d'entrée (Dernière édition 2009 Volume au dernier 2014 volume). J'ai besoin de javascript ou Jquery pour cela. Je vais écrire Js textchanged() ou focuschange() pour la première zone de texte. Alors que dois-je écrire dans les méthodes focuschage() ou textchanged().

J'ai changé un peu de code. Maintenant, Html va aimer ci-dessous. Ces zones de texte ont une classe CssClass commune. volumetextbox. Pouvons-nous utiliser cette classe et changer le texte dans toutes les zones de texte qui ont la même classe 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

Peut-être une approche comme celui-ci (non testé):

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

Answer 2

Les fonctions que vous écrivez dépendent entièrement de ce que vous voulez dans les 6 autres zones de texte. Vous pouvez mettre à jour les valeurs comme ...

document.getElementById('12_60').value = *some calculation*;