以前の入力値をテキストエリアに挿入するにはどうすればよいですか？

Question

私はHTML/CSSを初めて使い、簡単な連絡先フォームを作成して名前と番号を入力し、短いメッセージで人口がtextareaになりましたが、テキストフィールド内に置かれたものは自動的に入力します以前に連絡先フォームの名前の入力フィールドに入力します。これを行う最善の方法は何ですか？

<fieldset> 
<h1>Contact Form</h1> 
<label for="name">Patient Name:</label> 
<input name="name" id="name" type="text" size="40" maxlength="100"> 
<label for="number">Patient Number:</label> 
<input name="number" id="number" type="text" size="40" maxlength="12"> 
<label for="message">Text Messge:</label> 
<textarea name="message" id="message" cols="40" rows="10"> 
Hi [name], thank you for visiting us! 
</textarea> 
<input class="btn" name="submit" type="submit" value="Send"> 
</fieldset> 

Answer 1

一部のJavaScriptが問題を解決するはずです。

このscriptタグは、フォームの後にというHTMLファイルに挿入してください。

<script> 
    // save the location of the name field 
    var name_field = document.getElementById('name'); 

    //add an event listener to activate if the value of the field changes 
    name_field.addEventListener('change', function() { 
    // when the field changes run the following code 

    // copy the text (value) 
    var name = name_field.value; 

    // concatenate it with the desired message 
    var autoFill = 'Hi ' + name + ', thank you for visiting us!'; 

    // and paste it into the message field. 
    document.getElementById('message').value = autoFill; 
    }) 
</script> 

Answer 2

動的な動作については、いくつかのjavascriptが必要になります。

<input name="number" id="number" type="text" oninput="getNumber()" size="40" maxlength="12"> 

<script> 
var getNumber = function() { 
    document.getElementById("message").innerHTML = "Hi " + document.getElementById("name").value + ", thank you for visiting us"; 
} 
</script> 

今のところ、このメッセージを表示するにはtextAreaを使用しないでください。段落要素を使用してください。 AngularJSは、もっと興味がある場合はこのようなシナリオに最適です。