I want pop up window to display after validating my form

JavaScript
1

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:


     <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>
2

You just need to change your code logic a bit.

One option:

At the top of validation() set a boolean something like


var isDataValid = true;

then as you validate each form input, if any form input is invalid then set isDataValid = false;

After the last form input has been checked open the popup if all form data is valid

if(isDataValid){
    //open your popup window
}
3

Can you give me an example of one validation where is dataValid = false because I don’t know to write this in my current validation. Also can you review my javascript code below to see if the coding is correct: Do I need the function myClickHandler() or do I not really need it?

function validation() {
	
	 			var isDataValid = true;
	

                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 = "";
            }


            if(isDataValid){
    function openSessionPopup (session) {
 			window.open(session,
 			'window',
 			'width=500,height=500,scrollbars=yes,status=no');
 }
}

        }

function myClickHandler(){
     if(validation()){
        showSessionPopup();
     }

}

In HTML form

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

Asking those questions indicates to me that the probability that you did not write your posted code and now want someone to fix it for you is pretty high.

I don’t have time to fix “your” actual code but here is a more detailed general example of what I suggested.

function validateForm(){

     var isDataValid = true;
     var username = document.getElementById('txtUsername').value;

     if(username == '') {  //obviously need better validation in a real situation
           alert('Please enter a username');
           isDataValid = false;
     }

     if(isDataValid){
         //code to open your popup
    }
}

If you wrote all that code then you should be able to decide whether the function is needed or not.

5

I’m not asking you to fix my code. I am just asking to review my code and just state which area is incorrect, and i asked for an example as it is easier for me to understand then you just saying do this and do that. If I wanted you to fix my whole code I would of just said can you write the code for me. Now you gave me an example I understand it a lot more than your previous post.