如何使用 JavaScript 基于其他文本框更新文本框值

How to update the textbox value based on other textbox using JavaScript?

本文关键字：文本 更新 其他 JavaScript 何使用 于其他      更新时间：2023-09-26

我的表单中有三个输入文本框。

第一个是老师，第二个是年级。现在我有第三个输入文本框，我需要使用 JavaScript 从这两个值动态更新值作为"（教师）的 （X） 类"。

谁能帮我写代码？提前谢谢。

下面是 jquery 代码：

<script type="text/javascript">
  $(document).ready(function(){
    $('#both').value($('#teacher').val() + "'s " + $('#grade').val());
});
  </script>

我的输入标签是：

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

我需要添加哪些内容才能更新我的第三个输入字段。

使用输入内容更改时触发的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" />

或者使用 jQuery，你可以在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" />

演示

如果你使用的是jQuery，那么当dom准备好时更新第三个非常简单：

$(document).ready(function(){
    $('#third').value($('#first').val() + "' " + $('#second').val());
});

使用 javascript，你可以尝试这种方法：

var first_val=document.getElementById('first').val();
var second_val=document.getElementById('second').val();
document.getElementById('third').val(first_val + second_val);
相关文章：