JavaScript Popup Boxes

Question

New to PHP and script and have come across a problem that I can’t resolve.

I have a booking page that users tick a checkbox to book times. The on submit button then runs a script to check if they have booked the number of times that they asked for. So if asked for 3 booking times and they have only select 2 it fires the alert window. On pressing OK the window should reload so they can select again. This works great in Firefox and will reload all the select checkboxes are cleared.

However if you do this in IE and chrome the alert box hijacks the page and the window still has the checkbox’s selected.

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

you have a loop which is giving multiple times the popup, this is redundant.

also the use of location.reload(true) is suggested as the trueparameter reloads the current page from the server instead of from the cache.

the if(!alert("your text")){} checks if the alert box is not closed, when closed it executes the window.reload(true)

the submit button and form must have a unique id for this.

i have posted the updated code below:

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