フォームをコミットせずにテキストフィールドに値を生成する方法はありますか？

ユーザがフォームに入力された：フォームをコミットせずにテキストフィールドに値を生成する方法はありますか？

fname : Firstname 
mname : middlename 
lname : lastname 
fullname : Complete naam

ユーザがFIELD4に入る前に、私は既に値がフルネームで開始として& & MNAME LNAMEをFNAME与えるたいです。これは以下のようにしなければならないことがわかった。

私はすでにこれを作ったが、何かが間違っている...私はほとんどのJavascriptの経験を持っていない...

<!DOCTYPE html> 
<html> 
<body> 
First name: <input type="text" id="fname"><br> 
Middle name: <input type="text" id="mname"><br> 
Last name: <input type="text" id="lname"><br> 
Fullname: <input type="text" id="fullname" onfocus="myFunction()"><br> 

<script> 
function myFunction() { 
    document.getElementById("fullname").style.background = "yellow"; 
    document.getElementById("fullname").value = document.getElementsByTagName("fname").value + document.getElementsByTagName("mname").value + document.getElementsByTagName("lname").value; 
} 
</script> 

</body> 
</html>

出典

2016-07-14 Justme

'getElementsByTagName'の代わりに' getElementById'を使用してください。 –

[ラベルを愛してください]（http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/） – Quentin

Thxsこれは私の最初のスクリプトです:-) – Justme

あなたはgetElementsByTagNameメソッドを使用しているが、あなたはそれに渡している値はIDですの要素であり、タグ名ではありません（"input"）。

Use getElementById idで要素を取得する。

出典

2016-07-14 18:17:55 Quentin

あなたは、このようにgetElementByIdをを使用してアクセスすることができました次のいずれかのgetElementsByTagNameを使用する

First name: 
 
<input type="text" id="fname"> 
 
<br>Middle name: 
 
<input type="text" id="mname"> 
 
<br>Last name: 
 
<input type="text" id="lname"> 
 
<br>Fullname: 
 
<input type="text" id="fullname" onfocus="myFunction()"> 
 
<br> 
 
<script> 
 
    function myFunction() { 
 
    document.getElementById("fullname").style.background = "yellow"; 
 
    document.getElementById("fullname").value = document.getElementById("fname").value + document.getElementById("mname").value + document.getElementById("lname").value; 
 
    } 
 
</script>

OR スティック。

First name: 
 
<input type="text" id="fname"> 
 
<br>Middle name: 
 
<input type="text" id="mname"> 
 
<br>Last name: 
 
<input type="text" id="lname"> 
 
<br>Fullname: 
 
<input type="text" id="fullname" onfocus="myFunction()"> 
 
<br> 
 
<script> 
 
    function myFunction() { 
 
    var inputArr = document.getElementsByTagName("input"); 
 
    document.getElementById("fullname").style.background = "yellow"; 
 
    inputArr[3].value = inputArr[0].value + inputArr[1].value + inputArr[2].value; 
 
    } 
 
</script>

いいですね！

出典

2016-07-14 18:34:21 Ayan

最初のオプションを付けてください。フィールドが並べ替えられた場合、2番目のオプションはエラーが発生する可能性があります。もちろん、IDが変更された場合は最初のものが破損する可能性がありますが、それでも良い選択です。 – dshapiro

絶対に同意してください！ – Ayan

フォームをコミットせずにテキストフィールドに値を生成する方法はありますか？

答えて

関連する問題