2016-07-24 83 views
0

如果select下拉菜單的值爲NULL,則應該停止加載頁面。 jQuery的工作提醒用戶的問題,但頁面仍然延續到下一頁。任何援助都會很棒。由於頁仍然使用event.preventDefault()重新加載;

盧克

<fieldset class="form-group"> 
    <label for="question-1">1. What age group are you?</label> <br> 
    <select class="drop-down" id = "ageChoice"> 
    <option value="">Please Select</option> 
    <option value="16minus">16 or below</option> 
    <option value="16-18">16 to 18</option> 
    <option value="19-25">19 to 25</option> 
    <option value="26-34">26 to 34</option> 
    <option value="35-42">35 to 42</option> 
    <option value="43-50">43 to 50</option> 
    <option value="51-60">51 to 60</option> 
    <option value="61plus">61+</option> 
    </select> 
</fieldset> 

    <input class="btn btn-primary" type="button" id= "next" value="Next" onClick="location.href='first-test.html' "> 

$("#next").click(function() { 

    var age = $('#ageChoice'); 

    if (age.val() === '') { 
     event.preventDefault(); 
     alert("Please select your age group, thank you."); 

    } 
    else 
     return; 
}); 
+0

檢查你的控制檯,應該有一個關於'event'未定義的錯誤。它作爲回調函數的參數。 –

+0

嗨,感謝您的回覆,抱歉,我是jQuery新手,你的意思如下: https://jsfiddle.net/uvyqtsxn/ 如果是這樣,似乎沒有工作。再次感謝您的迴應。 – luke121

回答

1

好了,因爲你有兩個點擊處理,被處理兩次事件。您試圖阻止的'Default'不是onClick =「location.href ='first-test.html'。這是在jQuery點擊函數之後處理的,所以我們將onClick從html中取出並添加功能jQuery的單擊事件(我們可以做到這一點無論哪種方式,但監守你已經有大部分成立已有的代碼,我們會做這樣)

這裏是返工代碼:

<fieldset class="form-group"> 
    <label for="question-1">1. What age group are you?</label> <br> 
    <select class="drop-down" id = "ageChoice"> 
    <option value="">Please Select</option> 
    <option value="16minus">16 or below</option> 
    <option value="16-18">16 to 18</option> 
    <option value="19-25">19 to 25</option> 
    <option value="26-34">26 to 34</option> 
    <option value="35-42">35 to 42</option> 
    <option value="43-50">43 to 50</option> 
    <option value="51-60">51 to 60</option> 
    <option value="61plus">61+</option> 
    </select> 
</fieldset> 

    <input class="btn btn-primary" type="button" id= "next" value="Next"> 

和jquery:

$("#next").on('click', function (event) { 

    var age = $('#ageChoice'); 

    if (age.val() === '') { 
     alert("Please select your age group, thank you."); 
    } else { 
     location.href='first-test.html' 
    } 
}); 
+0

非常感謝,它的工作原理!一直呆了好幾個小時。我認爲這是一種更有效的編寫代碼的方式,將href從html中移除並放入jQuery中? – luke121

+0

嗯,這一切都取決於你想要做什麼,'onclick = ...'和$()。on('click',func)基本上是做同樣的事情。避免讓兩個獨立的觀察者觀看相同的事件。 – TetonDan

相關問題