I have a button known as "Prepare Questions". Now when I click on this button, this button does two things, using the validaton() function it validates the form so that if there is an error in the form (empty textbox and radio button not selected) then it displays the suitable error messages on the page. But also the button uses the "openSessionPopup" function so that it opens up a pop up window which states the word "Session".

The problem is that when I click on the button it does both functions, so it displays validation errors if there is some and also opens up the pop up window.

What I want to do is that the pop up window should only be displayed after there are no validation errors. But I can't seem to get this to work, does anyone else know how to do this.

I tried modifying it but now the validation works but the pop up window does not appear at all. Please help

Below is my code:


Code:
     <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                <title>Create a Session</title>
                <script type="text/javascript">
        
         function validation() {
        	 			
                        var btnRadioO = document.getElementsByName("sessionNo");               
                        var isbtnRadioChecked = false;;
            			
            			var dateTextO = document.getElementById("datepicker");
            			var timeTextO = document.getElementById("timepicker");
            			
            			
            			var errMsgO = document.getElementById("radioAlert");
            			
            			var errDateTimeMsgO = document.getElementById("dateTimeAlert");
            			var errDateMsgO = document.getElementById("dateAlert");
            			var errTimeMsgO = document.getElementById("timeAlert");
            			
            			
            			for(i=0; i < btnRadioO.length; i++){
                            if(btnRadioO[i].checked){
                                isbtnRadioChecked = true;
                            }
                        }
                        
                        if(!isbtnRadioChecked) {
                           errMsgO.innerHTML = "Please Select the Number of Sessions you Require";
                        } else {
                            errMsgO.innerHTML = "";
                        }                                
        
             if (dateTextO.value == ''){
        	            errDateMsgO.innerHTML = "Please Select a Date";
                    }else{
        	            errDateMsgO.innerHTML = ""; 
                    }
                    
             if (timeTextO.value == ''){
        	            errTimeMsgO.innerHTML = "Please Select a Time";
                    }else{
        	            errTimeMsgO.innerHTML = ""; 
                    }
        }
        
                           function openSessionPopup (session) {
         window.open(session,
         'window',
         'width=500,height=500,scrollbars=yes,status=no');
         }

 function myClickHandler(){
     if(validation()){
        showSessionPopup();
     }
}
        
        </script>
        </head>
        
        <body>
        <form action="create_session.php" method="post">
        
         <table>
                  <tr>
                  <th>Number of Sessions :</th>
                  <td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
        		  <td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
        		  <td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
        		  <td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
        		  <td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
        		  </tr>
        		  </table>
        		  <div id="radioAlert"></div>
         <p><input type="text" id="datepicker" >
                    <br/><span id="dateAlert"></span></p>
                    <p><input type="text" id="timepicker" >
                    <br/><span id="dateTimeAlert"></span><span id="timeAlert"></span></p>
        
    <p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"   /></p>
        </form>
        
        </body>