ラジオボタンでテキスト入力のON/OFF

Question

前提・実現したいこと

寄付金の受付フォームを作っています。
既定の金額の選択と任意の金額の入力をできるようにしたいのです。

ラジオボタンの選択で、テキストボックスの入力の可・不可はできるようになりました。

発生している問題・エラーメッセージ

テキストボックスの入力値がうまく決済サーバーに送られません。
決済サーバーには、金額を「amount」というパラメーターで送信する必要があるため
name="amount"で各選択肢に指定していますが、
radio-otherラベルの「自由な金額」の選択肢にも
name="amount"が指定されているため、テキストボックスに数値を入力しても
radio-otherが値なしで送信されているのだと思います。

radio-otherの値ではなく、テキストボックスに入力した値を送信するためには
どのように改善したらよいか、教えていただけないでしょうか。

該当のソースコード

JavaScriptソース

<!-- function changeDisabled() { if ( document.Form1["number"][3].checked ) { document . Form1["inputNumber"] . disabled = false; } else { document . Form1["inputNumber"] . disabled = true; } } window.onload = changeDisabled; // -->

HTML

<form action="https://xxx" method="POST" name="Form1"> <input type="radio" name="amount" value="100" id="number" checked onClick="changeDisabled()"> <label for="radio-0"> 100円寄付する</label>&nbsp; <input type="radio" name="amount" value="200" id="number" onClick="changeDisabled()"> <label for="radio-1"> 200円寄付する</label>&nbsp; <input type="radio" name="amount" value="300" id="number" onClick="changeDisabled()"> <label for="radio-2"> 300円寄付する</label>&nbsp; <input type="radio" name="amount" id="number" onClick="changeDisabled()"> <label for="radio-other"> 任意の金額で寄付する</label>&nbsp; <p style="display:inline;"><input type="text" name="amount" id="inputNumber" size="2">円</p> <input type="submit" value="決済する">

Comments

[stdio]

JavaScriptには詳しくありませんが、textのフォーカスが離れた時点で値を取得すれば良いのでは？

Answer 1

まず、id="number"が重複しているのを修正しましょう。HTMLは同じページ上に同一のidを使えません。

id="inputNumber"のnameを別の物に変え、この要素の変更時に入力値を3番目のラジオボタンのvalueに代入するようにすればよいです。

【【jQuery】ラジオボタン 変更された時のイベント処理（サンプルコード付）】
http://shiru-web.com/2017/05/08/01-39/

Comments

[npojp]

ご丁寧にご指摘をいただき、ありがとうございました。無事に求めていたとおりにできるようになりました。お返事が遅くなって申し訳ございませんでした。