JavaScript弹出框

Question

PHP和脚本的新手，遇到了一个我无法解决的问题。

我有一个预订页面，用户勾选一个复选框，预订时间。然后，on submit按钮运行一个脚本来检查他们是否已经预订了他们所要求的次数。因此，如果要求提供3次预订时间，而他们只选择了2次，则会触发警报窗口。按下OK后，窗口将重新加载，以便他们可以再次选择。这在Firefox中效果很好，会重新加载所有选中的复选框都会被清除。

但是，如果您在IE和chrome中执行此操作，警告框将劫持页面，并且窗口中的复选框仍处于选中状态。

function CheckBox() {
  try {

    var max = document.mainForm.serNo.length;
    var count = 0;
    var tot = <?php echo $Num ?>;

    for (var i = 0; i < max; i++) {
      if (document.mainForm.serNo[i].checked == true) {
        count++;
        serNoChecked = i;
      }
    }

    if (count < tot) {
      for (var i = 0; i < max; i++) {
        window.alert('THERE IS A PROBLEM WITH YOUR BOOKING. \n You have asked to book ' + tot +  ' times, but have only selected ' + count + ' times.\n Please re-select the same number of times as asked at the start or re-start your booking');

        window.location.assign("url");
      }
    }     

  } catch (e) {
     alert(e.message);
  }
}

Answer 1

你有一个循环，它给出了多次弹出，这是多余的。

另外，由于true参数从服务器而不是从缓存重新加载当前页面，因此建议使用location.reload(true)。

if(!alert("your text")){}检查警告框是否未关闭，如果关闭，它将执行window.reload(true)

提交按钮和表单必须具有唯一的id。

我已经在下面发布了更新后的代码：

document.getElementById("mySubmitButtonId").addEventListener("click", function(event) {
  try {
    event.preventDefault();
    var max = document.mainForm.serNo.length;
    var count = 0;
    var tot = <?php echo $Num ?>;

    for (var i = 0; i < max; i++) {
      if (document.mainForm.serNo[i].checked == true) {
        count++;
        serNoChecked = i;
      }
    }

    if (count !== tot) {
        if(!alert('THERE IS A PROBLEM WITH YOUR BOOKING. \n You have asked to book ' + tot +  ' times, but have only selected ' + count + ' times.\n Please re-select the same number of times as asked at the start or re-start your booking')){
        window.location.reload(true);
        }
      } else {
            document.getElementById("myFormId").submit();
        }

    } catch (e) {
     alert(e.message);
  }
});