页面仍在使用event.prventDefault();重新加载;

page is still reloading with event.preventDefault();

本文关键字:新加载 加载 prventDefault event      更新时间:2023-09-26

如果选择下拉菜单的值为NULL,则应停止加载页面。jQuery可以提醒用户这个问题,但是页面仍然会继续到下一页。任何帮助都将是极好的。感谢

Luke

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

好的,因为您有两个点击处理程序,所以事件将被处理两次。您试图阻止的"默认"不是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'
    }
});