在javascript中将具有相同ID的一个文本框的值复制到另一个文本框
下面是我的问题的html代码,我需要将一个文本框的内容复制到另一个类似ID的onblur或onkeyup。请帮助我。应针对我的问题更新javascript函数“sync”。提前谢谢在javascript中将具有相同ID的一个文本框的值复制到另一个文本框,javascript,textbox,Javascript,Textbox,下面是我的问题的html代码,我需要将一个文本框的内容复制到另一个类似ID的onblur或onkeyup。请帮助我。应针对我的问题更新javascript函数“sync”。提前谢谢 <html> </head> <body> <div id="container"> <script type="text/javascript"> function sync(order)
<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"> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="17"> </td>
<td width="10" bgcolor="#CCCCCC" class="header"> </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"> </td>
<td width="175"> </td>
<td width="175"> </td>
<td width="142"> </td>
<td width="142"> </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> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="43" bgcolor="#FFFFFF"> </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>
功能同步(顺序){
var-val,i,val1;
val=document.getElementsByTagName('input');
警报(val.length);
对于(i=0;i您的主要问题是所有
元素都具有相同的id“1067”。这不仅不符合XHTML,而且会导致javascript出现问题,因为文档。getElementById(order)
将返回多个元素,此函数不适合处理这种情况
我建议将类应用于所有
元素,使用jQuery将事件绑定到该类的每个元素,并以这种方式执行逻辑(使用jQuery的foreach枚举器,而不是id匹配的for循环)
当然,您也可以使用常规JavaScript实现这一点(正如您所做的,在实际元素上内联“onblur”事件连接)
但首先,首先,修复HTML,使其能够很好地使用JavaScript。您的主要问题是所有
元素都具有相同的id“1067”。这不仅不符合XHTML,而且还会导致JavaScript出现问题,如document.getElementById(order)
将返回多个元素,此函数不适合处理这种情况
我建议将类应用于所有
元素,使用jQuery将事件绑定到该类的每个元素,并以这种方式执行逻辑(使用jQuery的foreach枚举器,而不是id匹配的for循环)
当然,您也可以使用常规JavaScript实现这一点(正如您所做的,在实际元素上内联“onblur”事件连接)
但是首先,首先,修复HTML,使其能够很好地使用JavaScript。id
应该是唯一的,一个页面上不应该有多个具有相同id的元素,并且不能使用getElementById
引用它们(它可能会按照文档顺序返回具有id的第一个元素)
如果必须的话,您可以使用getElementsByTagName
和循环(与您的代码有点类似)来完成
函数getid(id){
var inputs=document.getElementsByTagName('input'),matches=[];
对于(var i=0;iid
应该是唯一的,一个页面上不应该有多个具有相同id的元素,并且不能使用getElementById
引用它们(它可能会返回文档顺序中具有id的第一个元素)
如果必须的话,您可以使用getElementsByTagName
和循环(与您的代码有点类似)来完成
函数getid(id){
var inputs=document.getElementsByTagName('input'),matches=[];
对于(var i=0;iI看不清发生了什么,您的格式有点滑稽。我看不清发生了什么,您的格式有点滑稽。实际上,我的目的是将在第一个文本框中输入的trackingNum的相同文本复制到其他相同的OrderID…如果可能,请您帮助我使用jQuery进行逐步更改和javascript代码。这不容易回答-因为你的HTML毫无意义。你所有的HTML都是固定的吗?还是动态生成的?看起来你有一堆tr,里面有相同的内容。这是动态内容,还是你手动键入所有这些HTML?如果是手动的,去掉所有ID,而是用ID将每个TD包装在一个DIV中。然后你就可以了按div id获取元素,例如(“#sometr.trackingnumber”)将为您提供一个元素,该元素在一个唯一的DIV中包含一个跟踪编号类。您可以将类应用于您想要处理的元素,并以这种方式工作。实际上,我的目的是将在第一个文本框中输入的trackingNum的相同文本复制到其他相同的OrderID…如果可能,请您帮助我进行逐步更改和javascript code使用jQuery。这不容易回答-因为你的HTML毫无意义。你所有的HTML都是固定的吗?还是动态生成的?看起来你有一堆tr,里面有相同的内容。这是动态内容,还是你手动键入所有这些HTML?如果是手动的,去掉所有ID,而是用一个ID。然后您可以通过div ID获取元素,例如(“#sometr.trackingnumber”)将为您提供在唯一div内具有跟踪编号类的元素。您可以将类应用于希望获得句柄的元素,并以这种方式工作。我已将每个文本框的“ID”更改为class,并修改了getAttribute('class')在上面的方法中,但不确定如何继续从类似的文本框复制数据。请帮助我继续。好的,函数getIds
返回一个元素数组,因此您希望循环该数组,并将每个项的值
属性设置为要复制的任何数据。我已更改了“id”将每个文本框的在上面的方法中,但不确定如何进一步从类似的文本框复制数据。请帮助我继续。好的,函数getIds
返回一个元素数组,因此您希望循环该数组,并将每个项的值
属性设置为要复制的任何数据。
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;
}