如何在一个文本框中连接两个或多个文本框值

时间：2022-04-28 15:42:08

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  

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  

    <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  

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

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

#1

5  

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  

    <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  

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

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

标签：

相关文章