SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I want pop up window to display after validating my form

    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>

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You just need to change your code logic a bit.

    One option:

    At the top of validation() set a boolean something like
    Code:
    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

    Code:
    if(isDataValid){
        //open your popup window
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    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
    Code:
    <p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"  /></p>

  4. #4
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    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
        }
    }

    Quote Originally Posted by carlbrooks View Post
    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?
    If you wrote all that code then you should be able to decide whether the function is needed or not.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •