如何在一个文本框中连接两个或多个文本框值
[英]how to concatenate two or more text box values in one text box
问题描述
I want to concatenate two or more text box values in one text box.Here I am getting values using id but that id will be dynamically added it means text box will dynamically added.For dynamically adding text box I am using for loop but am getting the value only the last text box value only becaues for loop executed.I want all text box values.Please help me to get me out.Thank you in advance. 
我想在一个文本框中连接两个或多个文本框值。这里我使用id获取值，但该id将动态添加，这意味着文本框将动态添加。为动态添加文本框我正在使用for循环但我得到了值只有最后一个文本框的值只是因为循环执行。我想要所有的文本框值。请帮我把我弄出来。谢谢你提前。
Here is the code for dynamic text box process: 以下是动态文本框过程的代码：
In this am using printwriter object in servlet 在这里我在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>");
}
but if I use static text box I am getting what I need but I need that in dynamic process. 但如果我使用静态文本框我得到了我需要的东西，但我需要在动态过程中。
here is the code for static text box process: 这是静态文本框过程的代码：
<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;
}
}
Please help me to find out the solution.Thank you in advance. 请帮我找出解决方案。谢谢你提前。
4 个解决方案
解决方案1
5 已采纳 2014-11-03 05:22:19
I would not use inline JavaScript and I would give my elements proper IDs if I really need them otherwise I would use classes. 我不会使用内联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"/>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.