Confirmation box is appearing more than once

I have a problem with my confirmation box. The problem is that when I click on a button, it will display the confirmation box, if I click OK then it will close the confirmation box and quickly open up the same confirmation box asking the same thing, if I click OK again then it submits the form. It does the same for Cancel where if I click Cancel for first time then confirmation box closes and reappears again asking to confirm again, if I click Cancel again then it closes the confirmation box.

It gets worse, if I click OK for the first confirmation for example then click Cancel for second confirmation, then it will show third confirmation and if I click OK then 4th confirmation box will appear after third one closes and etc.

I obviously want Confirmation box to appear once and if user Clicks OK, then submit form else close confirmation box. So what I want to know is why is it doing this. I have no errors in error console and I can’t really see problem with my code:

Below is Code: (I included all relevant functions so you understand what each function does)

<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Create a Session</title>
        <script type="text/javascript">
        
 function validation() {
	 
	 			var isDataValid = true;
	 
                var sessionNoO = document.getElementById("sessionNo");               
    			var questionNumberO = document.getElementById("txtQuestion");
    			var roomTextO = document.getElementById("room");
    			
    			var errSessionMsgO = document.getElementById("sessionNoAlert");
    			var errQuesMsgO = document.getElementById("numberAlert");
    			var errRoomMsgO = document.getElementById("roomAlert");
    			
    			var trimmedRoomText = roomTextO.value.replace(/^\\s+/, '').replace(/\\s+$/, '');
           
    
    			
   if (sessionNoO.value == ""){
	      errSessionMsgO.innerHTML = "Please Enter in the Number of Sessions you Require";
	      isDataValid = false;   
    }else if (sessionNoO.value == 0){
	    errSessionMsgO.innerHTML = "Number of Sessions Must be More than 0";
	      isDataValid = false;
      }else{
	            errSessionMsgO.innerHTML = ""; 
            }
    
                   
    if(questionNumberO.value == 0){
        errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        isDataValid = false;
    } else {
        errQuesMsgO.innerHTML = "";
    } 
            
          if (roomTextO.value == ""){
	      errRoomMsgO.innerHTML = "Please Enter in a Room Number";
	      isDataValid = false;
            }else if (!trimmedRoomText.length){
	      errRoomMsgO.innerHTML = "Please Enter in a Room Number"; 
	      isDataValid = false;      
        }else{
	            errRoomMsgO.innerHTML = ""; 
            }
            
            return isDataValid;

            }
            
             function showConfirm(){
	
         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to 
         go back and change any details towards your Session.Are you sure you want to Proceed? ");
         
         if (confirmMsg==true)
         {
         submitform();   
         }else{
         parent.close();      
         }
}
            
            function submitform()
			{
				
		var sessionFormO = document.getElementById("sessionForm");
				
  		sessionFormO.submit();
  		
			}
			</script>
			</head>
<body>			
			
		 <form action="QandATable.php" method="post" id="sessionForm">
          <p><strong>2: Number of Sessions you Require:</strong> <input type="text" id="sessionNo" onkeypress="return isNumberKey(event)"><br/><span id="sessionNoAlert"></span></p>
			<p><strong>8: Room:</strong> <input type="text" id="room"><br/><span id="roomAlert"></span></p>      <!-- Enter Room here-->
			<table>
            <tr>
            <th>Number of Questions:</th>
                <td class="spinner"><input type="text" class="spinnerQuestion" id="txtQuestion" name="textQuestion"></td>
                <td><button class="scrollBtn" id="btnQuestionUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
                <button class="scrollBtn" id="btnQuestionDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
                </tr>
                </table>
                <div id="numberAlert"></div>
                <p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>      <!-- Prepare Questions here-->
    
        </form>
        
        <script type="text/javascript">
			document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
    			
function myClickHandler(){
     if(validation()){
	    showConfirm();
     }
} 

</script>
		
 </body>
  1. Your code is much too messy to post on a public forum. You can write all the poorly formatted code you want, but if you want other people to help you, then you MUST spend the time to reformat your code so that it is legible. To wit, it must be obvious where function definitions begin and end. Also, functions should not have 20 if statements(possibly nested); functions should consist of 10 lines or so of clearly written code.

  2. When you write code, you should write 10 lines of code, then test the code to see that it works. Then write ten more lines and test the code some more. What you don’t want to do is write 100 lines of code and then test it for the first time. Debugging is too complicated otherwise. So you need to start over.

  3. Why are you defining some functions in the <head> section and others in the <body>? To make it as hard as possible for anyone reading your code to find all the functions?

Further to 7studs advice, it’s his number 3 that is your problem.
You have an onClick handler on the button


<input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/>

and then reassign it to fire again:


document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);

Thats why its firing twice.

Thank you, that sorted out the problem :slight_smile: