-1

CSSスター付きのラジオボタンを使用して、5つ星の評価を収集する簡単なフォームがあります。

星が選択されていない場合に評価の送信を停止するための非常に単純な JavaScript スクリプトを追加しようとしています (現在これを行って、MySQL に 0 つ星の評価を追加しています)。

私は JavaScript に非常に慣れていないので、実際に学んでいるのは今だけです。

私はこれを持っています：

<script>
function validateForm()
{
var x=document.forms["userparkrating"]["rating"].value;
if (x==0 || x=="")
  {
  alert("You must rate this park before submitting");
  return false;
  }
}
</script>

スターが選択されていない場合はエラー メッセージが表示されますが、選択されていない場合は、php/mySQL が通常どおりに処理されます。誰かが何が悪いのか教えてもらえますか?

以下は、使用されるフォームです。

<form name="userparkrating" action="userparkreview.php?park_id=<?=$park_id?>" onsubmit="return validateForm()" method="post">
    <input type="hidden" value="<?=$park_id?>" name="park_id">

<div class="star-rating">

            <input class="rb0" id="Ans_1" name="rating" type="radio" value="0" checked="checked" />                       
            <input class="rb1" id="Ans_2" name="rating" type="radio" value="0.5" />
            <input class="rb2" id="Ans_3" name="rating" type="radio" value="1" />
            <input class="rb3" id="Ans_4" name="rating" type="radio" value="1.5" />    
            <input class="rb4" id="Ans_5" name="rating" type="radio" value="2" />    
            <input class="rb5" id="Ans_6" name="rating" type="radio" value="2.5" />    
            <input class="rb6" id="Ans_7" name="rating" type="radio" value="3" />
            <input class="rb7" id="Ans_8" name="rating" type="radio" value="3.5" />    
            <input class="rb8" id="Ans_9" name="rating" type="radio" value="4" />
            <input class="rb9" id="Ans_10" name="rating" type="radio" value="4.5" />
            <input class="rb10" id="Ans_11" name="rating" type="radio" value="5" />

            <label for="Ans_1" class="star rb0l" onclick=""></label>
            <label for="Ans_2" class="star rb1l" onclick=""></label>
            <label for="Ans_3" class="star rb2l" onclick=""></label>
            <label for="Ans_4" class="star rb3l" onclick=""></label>
            <label for="Ans_5" class="star rb4l" onclick=""></label>
            <label for="Ans_6" class="star rb5l" onclick=""></label>
            <label for="Ans_7" class="star rb6l" onclick=""></label>
            <label for="Ans_8" class="star rb7l" onclick=""></label>
            <label for="Ans_9" class="star rb8l" onclick=""></label>
            <label for="Ans_10" class="star rb9l" onclick=""></label>
            <label for="Ans_11" class="star rb10l last" onclick=""></label>

            <label for="Ans_1" class="rb" onclick="">0</label>
            <label for="Ans_2" class="rb" onclick="">1</label>
            <label for="Ans_3" class="rb" onclick="">2</label>
            <label for="Ans_4" class="rb" onclick="">3</label>
            <label for="Ans_5" class="rb" onclick="">4</label>
            <label for="Ans_6" class="rb" onclick="">5</label>
            <label for="Ans_7" class="rb" onclick="">6</label>
            <label for="Ans_8" class="rb" onclick="">7</label>
            <label for="Ans_9" class="rb" onclick="">8</label>
            <label for="Ans_10" class="rb" onclick="">9</label>
            <label for="Ans_11" class="rb" onclick="">10</label>

            <div class="rating"></div>
            <div class="rating-bg"></div> 
        </div>
<br>
<input type="submit" value="Submit Rating" name="submit">

</form>
4

2 に答える 2

0

やってみました

もし (x==0 || !x)

編集

var radios = document.getElementsByName("rating"); 

for(var i = 0; i < radios.length; i++) { 
if(radios[i].checked) x = radios[i].value; 
}
于 2013-09-03T23:35:53.513 に答える