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.

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.

• javascript
• html

• You can add a class to all text boxes and later access them in the script by document.getElementsByClassName to loop over the list, you can get each element's attributes to get your final value – Aakash Jain Commented Nov 3, 2014 at 5:06
• The text boxes don't seem to be dynamically added; dynamically added usually means content is added after the DOM ready event. Please correct me if I am mistaken. – PeterKA Commented Nov 3, 2014 at 5:07
• You're using System.out.println in javascript. I don't think that's valid javascript. Try using document.write() instead.Official documentation – Vivek Pradhan Commented Nov 3, 2014 at 5:07
• 1 *** Why the upvotes, when the question is not even clear? Is there something I am missing? – PeterKA Commented Nov 3, 2014 at 5:09
• @PeterKA i just define nums=5 for your understanding purpose only. In real time that nums value dynamically change – user3851613 Commented Nov 3, 2014 at 5:09

4 Answers 4

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./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"/>

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

$(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./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"/>

$(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./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"/>