페이지가 여전히 event.preventDefault()로 다시로드 중입니다.

Question

선택 드롭 다운 메뉴에 NULL 값이 있으면 페이지로드가 중지되어야합니다. 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" 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; 
}); 

Answer 1

확인 감사

루크, 두 개의 클릭 핸들러를 가지고 있기 때문에, 이벤트가 두 번 처리되고 있으므로. 'Default'는 onClick = "location.href = 'first-test.html'이 아니며, 이는 jQuery 클릭 함수 이후에 처리됩니다. 그래서 우리는 html에서 onClick을 가져 와서

<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를 클릭 이벤트에 대한 기능 (우리는 그것을 어느 쪽이든을 할 수 있지만, 이미 이미 설정된 대부분의 코드가 becuase 우리는 이런 식으로 할 것)

및 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' 
    } 
});