※ ChatGPTを利用し、要約された質問です(原文:以下ソースのJavaScript部分をご教示下さい)
JavaScriptを使用した依頼者情報の入力フォームの実装方法
このQ&Aのポイント
JavaScriptを使用した依頼者情報の入力フォームの実装方法について教えてください。依頼者情報の入力フォームには、本人、奥様、娘、息子などの選択肢があり、その他を選択した場合にはテキスト入力をすることができます。また、連絡先の番号として任意の文字列を入力することも可能です。チェックボックスの「日時確認」と「依頼内容確認」に関しては、反映内容に含める必要がありません。
入力フォームの内容を反映するためのボタン「内容反映」があります。このボタンを押すと、依頼者の選択内容と連絡先の番号がテキストエリアに表示されます。また、リセットボタンを押すと、入力内容とテキストエリアがリセットされます。
依頼者情報の入力フォームをJavaScriptを使用して実装する方法について教えてください。また、反映内容を表示するためのボタンやリセットボタンの動作についても教えてください。
以下ソースのJavaScript部分をご教示下さい
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script>
</script>
</head>
<form action="">
<Table Border="1" Width="250">
<Tr>
<Td ColSpan="4" Align="Center">
<B>依頼者</B>
</Td>
</Tr>
<Tr>
<Td Valign="top" Width="20%">
<input type="radio" name="irai" value="本人">本人
</Td>
<Td Valign="top" Width="20%">
<input type="radio" name="irai" value="奥さま">奥様
</Td>
<Td Valign="top" Width="20%">
<input type="radio" name="irai" value="お嬢さま">娘
</Td>
<Td Valign="top" Width="20%">
<input type="radio" name="irai" value="ご子息さま">息子
</Td>
</Tr>
<Tr>
<Td ColSpan="4">
<input type="radio" name="irai">その他
<input type="text" size="21" name="hoka">
</Td>
</Tr>
</Table>
<Table Border="1" Width="250">
<Tr>
<Td ColSpan="4" Align="Center">
<B>依頼者の連絡先</B>
</Td>
</Tr>
<Tr>
<Td Valign="top">
番号:<input type="text" size="27" name="t">
</Td>
</Table>
<Table Border="1" Width="250">
<Tr>
<Td Width="24%">
<center><input type="checkbox" name="1">
</Td><Td>日時確認</Td></Tr>
</Table>
<Table Border="1" Width="250">
<Tr>
<Td Width="24%">
<center><input type="checkbox" name="2">
</Td><Td>依頼内容確認</Td></Tr>
</Table>
<textarea name="yoyaku" value="" rows="5" cols="28">
</textarea>
<br>
<button type="button" onclick="update(this.form);">内容反映</button>
<input type="reset" value="リセット">
</form>
</body>
</html>
「内容反映」を押すと、テキストエリアに以下の様に吐き出され、
リセットで入力内容・テキストエリア共にリセットしたいです。
チェックボックスの2つについては、確認だけですので、
吐き出す必要はありません。
◆反映内容◆
依頼者:(irai選択内容が反映)
連絡先:(tに入力した内容が反映)
宜しくお願い致します。
お礼
bodyタグの指摘まで… 本当にありがとうございます!!