在javascript中將具有相同ID的一個文本框的值複製到另一個文本框中

下面是我的問題的html代碼，我需要將一個文本框的內容複製到另一個相似ID的onblur或onkeyup。請幫助我。 javascript函數「sync」應該針對我的問題進行更新。提前致謝。在javascript中將具有相同ID的一個文本框的值複製到另一個文本框中

<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>

來源

2010-09-13 Colours

我真的無法看到發生了什麼，你的格式有點有趣。 – xj9 2010-09-13 23:33:57

你的主要問題是所有<input>元素具有相同的ID，「1067」。這不但不符合XHTML標準，而且會導致您的javascript問題，因爲document.getElementById(order)將返回多個元素，這是該函數不能處理的場景。

我建議應用類所有<input>元素，使用jQuery的.blur()事件綁定到類的每一個元素，並執行你的邏輯方式（使用jQuery的的foreach枚舉，而不是一個與ID匹配環）。

當然，您也可以使用常規JavaScript來完成此操作（就像您已經完成的那樣，在實際元素上內聯「onblur」事件接線）。

但首先要弄清楚HTML，以便它可以在JavaScript中表現出色。

來源

2010-09-13 23:53:23 RPM1984

其實我的意圖是複製跟第一個文本框中輸入的trackingNum相同的文本到其他OrderID ....如果可能的話，請你幫助我步驟明智的變化和使用jQuery的JavaScript代碼。 – Colours 2010-09-14 02:20:55

它不容易回答 - 因爲你的HTML沒有意義。你的HTML是否被修復？或者是一個動態生成的？看起來你有一堆內容相同的tr。這是動態內容，還是你手動輸入所有這些HTML？如果是手動的，請刪除所有ID，然後將每個TD包裹在一個帶有ID的DIV中。然後，您可以通過div id獲取元素，例如（'#sometr .trackingnumber'）會爲您提供具有唯一DIV內跟蹤編號類別的元素。你可以將類應用於你想要處理的元素 - 並以這種方式工作。 – RPM1984 2010-09-14 03:19:18

id應該是獨一無二的，你不應該有一個以上的元素與頁面上相同的ID，而不能使用getElementById引用它們（這將可能文件以便與返回的第一個元素ID）。

你可以做到這一點......如果非要用getElementsByTagName和循環（有點類似於你的代碼）

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; 
}

但是，你真的應該重新的因素，並把「相似」值元素類，在這種情況下，上面的代碼仍然可以工作，只需要用替換'class'

來源

2010-09-13 23:58:07 MooGoo

我已將每個文本框的「id」更改爲class，並修改了上述方法中的getAttribute（'class'），但不知道如何從類似的文本框複製數據。請幫我進一步處理。 – Colours 2010-09-20 05:15:04

好吧，函數'getIds'返回一個元素數組，所以你需要遍歷該數組，並將每個元素的'value'屬性設置爲你正在複製的任何數據。 – MooGoo 2010-09-20 14:14:49

在javascript中將具有相同ID的一個文本框的值複製到另一個文本框中

回答

相關問題