如何在一個文本框中連接兩個或多個文本框值
[英]how to concatenate two or more text box values in one text box
問題描述
我想在一個文本框中連接兩個或多個文本框值。這里我使用id獲取值，但該id將動態添加，這意味着文本框將動態添加。為動態添加文本框我正在使用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;
}
}
請幫我找出解決方案。謝謝你提前。
4 個解決方案
解決方案1
5 已采納 2014-11-03 05:22:19
我不會使用內聯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"/>
如何訪問onchange Javascript中的多個文本框
[英]how to access more than one text box which is in onchange Javascript
如何使用Javascript減去兩個文本框值並在另一個文本框中顯示
[英]How to subtract two text box values and display in another text box using Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.