logo标签列表

如何将两个或更多文本框的值合并到一个文本框中

javascripthtml
3
我想将两个或多个文本框的值连接到一个文本框中。这里我使用ID获取值，但是该ID将会动态添加，这意味着文本框将被动态添加。为了动态添加文本框，我使用for循环，但只获取最后一个文本框的值，因为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;       
   }                        
}

请帮我找出解决方案。先谢谢你了。

1
为什么这个问题都没有表述清楚，还有人点赞？我是不是漏看了什么？ - PeterKA
你的服务器端逻辑有误吗？ - Koti Panga
@VenkataPanga 先生，如果您理解我的需求，请告诉我解决方案。 - user3851613
@PeterKA，这是仅使用JavaScript编写的内容。我正在servlet中使用PrintWriter对象。 - user3851613
Java和JavaScript之间有很大的区别。Java是服务器端语言，而JavaScript是客户端语言。 - PeterKA
显示剩余7条评论
4个回答
6

如果我真的需要它们，我不会使用内联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"/>

太好了！很高兴我能帮到你。 - PeterKA
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>
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"/>

1
请您能否添加一个简短的解释？ - J Fabian Meier
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"/>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接