如何使用 JavaScript 根据其他文本框更新文本框值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11167386/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update the textbox value based on other textbox using JavaScript?
提问by lucky
I have three input text boxes in my form.
我的表单中有三个输入文本框。
First one is teacher, second one is grade. Now I've the third input text box, where i need to update the value dynamically from these two values as "(teacher)'s (X) class" using JavaScript.
第一个是老师，第二个是年级。现在我有了第三个输入文本框，我需要在其中使用 JavaScript 将这两个值动态更新为“（教师）的（X）类”。
Can anyone help me in writing the code? Thanks in advance.
谁能帮我写代码？提前致谢。
here is the jquery code:
这是jquery代码：
<script type="text/javascript">
$(document).ready(function(){
$('#both').value($('#teacher').val() + "'s " + $('#grade').val());
});
</script>
and my input tags are:
我的输入标签是：
<input type="text" name="teacher_name" id="teacher" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="grade" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
<input type="text" name="teacher_name" id="both" value="" style="background:#f7f6f2 url(../images/input_02.png) repeat left top;border: 0px;width: 250px;height: 10px;padding: 10px;display: block;">
what are the things i need to add to make my third input field to get updated.
我需要添加哪些内容才能使我的第三个输入字段得到更新。
采纳答案by Alberto De Caro
Use the onChangeevent that is triggered when an input content changes or the onBlurevent that is triggered when an input lost the focus:
使用onChange输入内容改变onBlur时触发的事件或输入失去焦点时触发的事件：
function UpdateInfo()
{
var teacher = document.getElementById('teacher').val();
var grade = document.getElementById('grade').val();
var info = teacher + '\'s '+ grade + ' class';
document.getElementById('info').value = info;
}
/* Solution 1 (onChange) */
<input id="teacher" type="text" onChange="UpdateInfo();" />
<input id="grade" type="text" onChange="UpdateInfo();" />
<input id="info" type="text" />
/* Solution 2 (onBlur) */
<input id="teacher" type="text" onBlur="UpdateInfo();" />
<input id="grade" type="text" onBlur="UpdateInfo();" />
<input id="info" type="text" />
Or using jQuery, you can bind the event at document.readyevent:
或者使用 jQuery，您可以在 event 处绑定document.ready事件：
$(document).ready(function()
{
/*
* binding onChange event here
* you can replace .change with .blur
*/
$('#teacher').change(UpdateInfo);
$('#grade').change(UpdateInfo);
});
function UpdateInfo()
{
var teacher = $('#teacher').val();
var grade = $('#grade').val();
var info = teacher + '\'s '+ grade + ' class';
$('#info').val(info);
}
<input id="teacher" type="text" />
<input id="grade" type="text" />
<input id="info" type="text" />
回答by slash197
If you are using jQuery it's pretty simple to update the third one when the dom is ready:
如果您使用的是 jQuery，则在 dom 准备好时更新第三个非常简单：
$(document).ready(function(){
$('#third').value($('#first').val() + "' " + $('#second').val());
});
回答by Mohit Pandey
With javascript, you can try this method:
使用javascript，你可以试试这个方法：
var first_val=document.getElementById('first').val();
var second_val=document.getElementById('second').val();
document.getElementById('third').val(first_val + second_val);
