how to concatenate two or more text box values in one text box
Question
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.
Here is the code for dynamic text box process:
In this am using printwriter object in servlet
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 answers
solution1
5 ACCPTED 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.
$(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"/>
solution2
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>
solution3
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"/>
solution4
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"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.