如何使用JavaScript基於其他文本框更新文本框的值？

我的表單中有三個輸入文本框。如何使用JavaScript基於其他文本框更新文本框的值？

首先是老師，第二個是成績。現在我有了第三個輸入文本框，我需要使用JavaScript將這兩個值動態更新爲「（teacher）'（X）class」。

任何人都可以幫我寫代碼嗎？在此先感謝。

這裏是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;">

什麼是我需要添加，使我的第三個輸入字段得到更新的東西。

來源

2012-06-23 lucky

你能告訴我們你有什麼這麼遠嗎？ – JAAulde

使用onChange事件當輸入內容發生變化時觸發，或當輸入丟失焦點時觸發事件：

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

DEMO

來源

2012-06-23 07:16:24

沒有這一個也沒有工作似乎一切都很好，但一般頁面此代碼不起作用 – lucky

語法錯誤固定 –

我認爲這會工作正常，但不能在我的代碼工作不知道我在做什麼錯我只是更新了這些在我的代碼，但我的輸入字段不會改變...... – lucky

如果您正在使用jQuery這是很簡單的更新第三個當DOM準備：

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

來源

2012-06-23 06:23:39 slash197

我應用了這個，但沒有，我沒有得到預期的結果... – lucky

你有jQuery包括在你的網頁上嗎？ – slash197

是的，我已經包括jquery在我的代碼... – lucky

使用JavaScript，你可以試試這個方法：

var first_val=document.getElementById('first').val(); 

var second_val=document.getElementById('second').val(); 

document.getElementById('third').val(first_val + second_val);

來源

2012-06-23 06:29:25

我試過這一個已經老兄沒有得到預期的結果.... – lucky

分享您的代碼... –

如何使用JavaScript基於其他文本框更新文本框的值？

回答

相關問題