CODEWITHSUNDEEP
javascriptvalidationfunctionpopupproject
BruceyBandit
BruceyBandit

Reputation: 4334

I Want Pop Up Window To Appear If No Validation Errors

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.

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

    </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="validation();openSessionPopup(this.href); return false"  /></p>
    </form>

    </body>

Upvotes: 0

Views: 2284

Answers (1)

Keith.Abramo
Keith.Abramo

Reputation: 6965

First you should move your event handlers out of your html markup.

Next you should bind an event handler to that click event.

After that you should modify your validation method to return true or false to denote if it passed validation or not.

Last you should use that validation result in a conditional wrapping your showpopup method invocation.

Something like

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

for your handler and this how how you would bind it

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

Finally you would modify your validation method like so

function validation() {
    var result = 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";
                   result = false;
                } else {
                    errMsgO.innerHTML = "";
                }                                

     if (dateTextO.value == ''){
                result = false;
                errDateMsgO.innerHTML = "Please Select a Date";
            }else{
                errDateMsgO.innerHTML = ""; 
            }

     if (timeTextO.value == ''){
                errTimeMsgO.innerHTML = "Please Select a Time";
                result = false;
            }else{
                errTimeMsgO.innerHTML = ""; 
            }

     return result;
}

This will make your validation() method return false if you have errors.

Upvotes: 1

Related Questions