データの評価を行うシステムで、ラジオボタンで評価を選ぶと、評価の合計を行って表示するようにJavaScriptを書きました。
ajya.hatenablog.jp
追加の機能で、観点のいずれかで「1」を選んだ場合、コメントの入力を必須にする、JavaScriptを書きました。
HTMLのコード
formがsubmitされたら、onsubmitでデータを区別する名前を引数として、JavaScriptを呼び出すようにしました。
<form method="post" onsubmit="return save('data1');"> データ1の評価 <div id="data1"> データ1の観点1 <input type="radio" name="rating_item1" value="1" onclick="totalrating('data1')">1 <input type="radio" name="rating_item1" value="2" onclick="totalrating('data1')">2 <input type="radio" name="rating_item1" value="3" onclick="totalrating('data1')">3 データ1の観点2 <input type="radio" name="rating_item2" value="1" onclick="totalrating('data1')">1 <input type="radio" name="rating_item2" value="2" onclick="totalrating('data1')">2 <input type="radio" name="rating_item2" value="3" onclick="totalrating('data1')">3 <textarea name="comment" cols="70" rows="5"></textarea> </div> </form> <form method="post" onsubmit="return save('data2');"> データ2の評価 <div id="data1"> データ2の観点1 <input type="radio" name="rating_item1" value="1" onclick="totalrating('data2')">1 <input type="radio" name="rating_item1" value="2" onclick="totalrating('data2')">2 <input type="radio" name="rating_item1" value="3" onclick="totalrating('data2')">3 データ2の観点2 <input type="radio" name="rating_item2" value="1" onclick="totalrating('data2')">1 <input type="radio" name="rating_item2" value="2" onclick="totalrating('data2')">2 <input type="radio" name="rating_item2" value="3" onclick="totalrating('data2')">3 <textarea name="comment" cols="70" rows="5"></textarea> </div> </form>
JavaScriptのコード
JavaScrpitは呼び出されると、データごとの観点の選択を取得して、値が1と判定されれば、1点と評価されているので、コメントが未入力であればエラーメッセージを表示するようにしました。
function save(dataid) { var comment = $("#" + dataid+ " textarea[name='comment']").val(); var one_rating = false; for (var loop = 1; loop <= 2; loop++) { if ($("#" + dataid+ " input:radio[name='rating_item" + loop + "']:checked").val() == "1") { one_rating = true; } } if (one_rating == true){ if (comment == "") { alert("評価で1を選んだ場合は、コメントを入力してください。"); return false; } } }
こちらの機能の追加をしている際に、ループでできるのではないかと気がついて、こちらのコードを作成してから、前回のコードもループを使うように直していました。