如何在一个文本框中连接两个或多个文本框值
[英]how to concatenate two or more text box values in one text box
问题描述
我想在一个文本框中连接两个或多个文本框值。这里我使用id获取值，但该id将动态添加，这意味着文本框将动态添加。为动态添加文本框我正在使用for循环但我得到了值只有最后一个文本框的值只是因为循环执行。我想要所有的文本框值。请帮我把我弄出来。谢谢你提前。
以下是动态文本框过程的代码：
在这里我在servlet中使用printwriter对象
int nums=5;
out.println("<input type='text' id='static'>");
int i;
for (i=0;i<nums; i++) {
out.println("<input type='text' Style='width:30px' maxlength='1' id='id"+i+"'onkeyup='sum();'> ");
out.println("<script>function sum(){ alert('id"+i+"'); var txtFirstNumberValue=document.getElementById('id'+i+'').value;var result = document.getElementById('static').value + txtFirstNumberValue;alert(result);if (isNaN(result)){ document.getElementById('static').value = result; }}</script>");
}
但如果我使用静态文本框我得到了我需要的东西，但我需要在动态过程中。
这是静态文本框过程的代码：
<input type="text" maxlength="1" id="1" onkeyup="sum();"/>
<input type="text" maxlength="1" id="2" onkeyup="sum();"/>
<input type="text" maxlength="1" id="3" onkeyup="sum();"/>
<input type="text" id="4"/>
function sum() {
var txtFirstNumberValue = document.getElementById('1').value;
var txtSecondNumberValue = document.getElementById('2').value;
var txtThirdNumberValue = document.getElementById('3').value;
var result = txtFirstNumberValue + txtSecondNumberValue + txtThirdNumberValue;
if (isNaN(result)) {
document.getElementById('4').value = result;
}
}
请帮我找出解决方案。谢谢你提前。
4 个解决方案
解决方案1
5 已采纳 2014-11-03 05:22:19
我不会使用内联JavaScript，如果我确实需要它，我会给我的元素正确的ID，否则我会使用类。
$(document).ready(function() { $('.in').on('input',function() { var allvals = $('.in').map(function() { return this.value; }).get().join(''); $('.out').val( allvals ); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="in" type="text" maxlength="1" id="i1"/> <input class="in" type="text" maxlength="1" id="i2"/> <input class="in" type="text" maxlength="1" id="i3"/> <input class="out" type="text" id="i4"/>
解决方案2
0 2014-11-03 05:25:28
<script type="text/javascript">
$(document).ready(function(){
var cls = document.getElementsByClassName('test');
var i =0;
var len = cls.length;
var tot = 0;
for(i=0;i<l;i++){
var cur = cls[i].value;
tot = parseInt(cur)+tot;
}
//document.getElementById("id"+cls.length).value = tot; //set the value for last element as the tot var
});
</script>
<body>
<input type="text" maxlength="1" value="1" id="1" class="test"/>
<input type="text" maxlength="1" value="2" id="2" class="test"/>
<input type="text" maxlength="1" value="3" id="3" class="test"/>
</body>
解决方案3
0 2016-06-25 10:17:45
$(document).ready(function() { $('.in').on('input',function() { var allvals = $('.in').map(function() { return this.value; }).get().join(''); $('.out').val( allvals ); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="in" type="text" maxlength="1" id="i1"/> <input class="in" type="text" maxlength="1" id="i2"/> <input class="in" type="text" maxlength="1" id="i3"/> <input class="out" type="text" id="i4"/>
解决方案4
0 2017-09-29 07:58:21
$(document).ready(function() { $('.in').on('input',function() { var allvals = $('.in').map(function() { return this.value; }).get().join(''); $('.out').val( allvals ); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input class="in" type="text" id="i1"/> <input class="in" type="text" id="i2"/> <input class="in" type="text" id="i3"/> <input class="out" type="text" id="i4"/>
如何访问onchange Javascript中的多个文本框
[英]how to access more than one text box which is in onchange Javascript
如何使用Javascript减去两个文本框值并在另一个文本框中显示
[英]How to subtract two text box values and display in another text box using Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.