Copier la valeur d'une zone de texte avec le même ID à l'autre en javascript

Ci-dessous le code html de mon problème J'ai besoin de copier le contenu d'une zone de texte à un autre onblur ou onkeyup d'ID similaire. Merci de m'aider. La fonction javascript "sync" devrait être mise à jour pour mon problème. Merci d'avance.Copier la valeur d'une zone de texte avec le même ID à l'autre en javascript

<html> 

</head> 
    <body> 
     <div id="container">   

      <script type="text/javascript"> 
function sync(order){ 
    var val, i, val1; 
    val = document.getElementsByTagName('input'); 
    alert(val.length); 
    for (i=0;i<val.length;i++){ 
      if(val[i].getAttribute('id')==order){ 
       val1 = document.getElementById(order).value; 
       if(val1 != '') 
        break; 
      } 

    } 

} 

</script> 
      <div id="body"> 
       <div id="wrapper"> 
        <form id="assignship" name="assignship" action="/drivewise-dst/assignship" method="post"> 
<table class="wwFormTable"> 
    <table width="1024" border="0" cellspacing="0" cellpadding="0"> 

      <tr> 
       <td height="10" colspan="3" class="titlebar" 
        style="background-repeat: no-repeat; align: right">&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3"> 
       <table width="1011" border="0" cellpadding="0" cellspacing="0"> 
        <tr> 
         <td width="17">&nbsp;</td> 
         <td width="10" bgcolor="#CCCCCC" class="header">&nbsp;</td> 
         <td width="110" bgcolor="#CCCCCC" class="header">Export To Excel</td> 
         <td width="130" bgcolor="#CCCCCC" class="header">Order #</td> 
         <td width="175" bgcolor="#CCCCCC" class="header">First Name</td> 
         <td width="205" bgcolor="#CCCCCC" class="header">Last Name</td> 
         <td width="142" bgcolor="#CCCCCC" class="header">Tracking #</td> 
         <td width="115" bgcolor="#CCCCCC" class="header">Serial #</td> 
        </tr> 
       </table> 
       </td> 
      </tr> 
      <tr> 
       <td></td> 
       <td> 
       <div 
        style="width: 993px; height: 350px; overflow: auto; overflow-x: hidden; background-color: #f9f5e3;"> 
       <table width="1024" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
         <td colspan="7"> 
         <div align="center"></div> 
         </td> 
        </tr> 
        <tr> 
         <td width="114"> 
         <div align="center"><input name="Export7" type="checkbox" 
          id="Export7" onclick="javascript:checkedAll();" /></div> 
         </td> 
         <td width="105">&nbsp;</td> 
         <td width="175">&nbsp;</td> 
         <td width="175">&nbsp;</td> 
         <td width="142">&nbsp;</td> 
         <td width="142">&nbsp;</td> 
        </tr> 


         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="0" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">1067</td> 
          <td width="175" class="chartcopy">ELEPHANT</td> 
          <td width="175" class="chartcopy">FOX</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="1" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">1067</td> 
          <td width="175" class="chartcopy">ELEPHANT</td> 
          <td width="175" class="chartcopy">FOX</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="2" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">1067</td> 
          <td width="175" class="chartcopy">ELEPHANT</td> 
          <td width="175" class="chartcopy">FOX</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="3" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">1085</td> 
          <td width="175" class="chartcopy">CAT</td> 
          <td width="175" class="chartcopy">DOG</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1085" onblur="javascript:sync('1085')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="4" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">3333</td> 
          <td width="175" class="chartcopy">APPLE</td> 
          <td width="175" class="chartcopy">BOY</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="5" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">3333</td> 
          <td width="175" class="chartcopy">APPLE</td> 
          <td width="175" class="chartcopy">BOY</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="6" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">3334</td> 
          <td width="175" class="chartcopy">APPLE</td> 
          <td width="175" class="chartcopy">BOY</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3334" onblur="javascript:sync('3334')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

         <input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/> 
         <tr> 
          <td width="114" align="center"><input 
           value="7" 
           type=checkbox name="chkbox" id="chkbox"></input></td> 
          <td width="105" class="chartcopy">3335</td> 
          <td width="175" class="chartcopy">APPLE</td> 
          <td width="175" class="chartcopy">BOY</td> 
          <td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3335" onblur="javascript:sync('3335')"/></td> 
          <td width="160"> 
          <div class="action-error"></div> 
          <input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/> 
          </td> 
         </tr> 

       </table> 
       </div> 
       </td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td colspan="3"> 
       <table width="1011" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
         <td height="43" bgcolor="#FFFFFF">&nbsp;</td> 
</td> 
         <td width="157" bgcolor="#FFFFFF"><input type="button" alt="" id="xxx" name="xxx" value="submit"/> 

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


    </table> 
</table></form>          
       </div> 
      </div> 
     </div> 
    </body> 

</html>

Source

2010-09-13 Colours

Je ne peux pas vraiment voir ce qui se passe, votre mise en forme est un peu drôle. – xj9

Votre principal problème est tous vos <input> éléments ont le même id, "1067". Non seulement ce n'est pas conforme à XHTML, mais cela causera des problèmes avec votre javascript, car document.getElementById(order) renverra plusieurs éléments, un scénario que cette fonction n'est pas conçue pour gérer.

Je vous suggère d'appliquer des classes à tous vos <input> éléments, utilisez jQuery pour lier l'événement .blur() à chaque élément de cette classe, et effectuer votre logique de cette façon (utilisez le recenseur foreach jQuery plutôt qu'une boucle avec correspondance id) .

Bien sûr, vous pouvez le faire avec du JavaScript régulier (comme vous l'avez fait, le câblage d'événement "onblur" en ligne sur les éléments réels).

Mais tout d'abord, corrigez le code HTML pour qu'il fonctionne correctement avec JavaScript.

Source

2010-09-13 23:53:23 RPM1984

En fait, mon intention est de copier le même texte de trackingNum entré dans la première zone de texte à l'autre même OrderID .... si possible pouvez-vous s'il vous plaît m'aider avec les changements par étapes et le code javascript en utilisant jQuery. – Colours

Ce n'est pas facile de répondre - car votre HTML n'a aucun sens. Tout votre HTML est-il corrigé? Ou est un généré dynamiquement? On dirait que vous avez un tas de tr avec le même contenu à l'intérieur. Est-ce un contenu dynamique ou est-ce que vous tapez manuellement tout ce code HTML? Si c'est manuel, débarrassez-vous de tous les identifiants, et à la place, enveloppez chaque TD dans un DIV avec un ID. Ensuite, vous pouvez obtenir des éléments par ID div, par exemple ('#sometr .trackingnumber') vous donnera l'élément avec une classe de numéro de suivi dans un DIV unique. Vous pouvez appliquer des classes aux éléments que vous souhaitez manipuler - et travailler de cette façon. – RPM1984

id est censé être unique, vous ne devriez pas avoir plus d'un élément avec le même identifiant sur une page, et vous ne pouvez pas utiliser getElementById pour les référencer (il probablement revenir le premier élément de l'ordre du document avec le id).

Vous pouvez le faire ... si vous devez, à l'aide getElementsByTagName et une boucle (un peu similaire à votre code)

function getIds(id) { 
    var inputs = document.getElementsByTagName('input'), matches = []; 
    for (var i=0; i<inputs.length; i++) 
    if (inputs[i].getAttribute('id') == id) matches.push(inputs[i]); 

    return matches; 
}

Mais vous devriez vraiment re-facteur et de mettre les valeurs « similaires » dans l'élément classes, dans ce cas, le code ci-dessus fonctionne encore, il suffit de remplacer 'id' avec 'class'

Source

2010-09-13 23:58:07 MooGoo

J'ai changé "id" de chaque zone de texte en classe et j'ai modifié la méthode getAttribute ('class') dans la méthode ci-dessus, mais je ne sais pas comment continuer à copier les données de zones de texte similaires. Merci de m'aider à aller plus loin. – Colours

Eh bien, la fonction 'getIds' retourne un tableau d'éléments, donc vous voudriez faire une boucle sur ce tableau et définir la propriété' value' de chaque élément sur les données que vous copiez. – MooGoo

Copier la valeur d'une zone de texte avec le même ID à l'autre en javascript

Répondre

Questions connexes