ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript 評価に1点があった場合、コメント入力を必須にする方法

スポンサーリンク

データの評価を行うシステムで、ラジオボタンで評価を選ぶと、評価の合計を行って表示するように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>

プログラミング中
unsplash-logoTrue Agency

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;
        }
    }
}

こちらの機能の追加をしている際に、ループでできるのではないかと気がついて、こちらのコードを作成してから、前回のコードもループを使うように直していました。