Я хочу, чтобы появилось всплывающее окно, если нет ошибок проверки - PullRequest
0 голосов
/ 20 ноября 2011

У меня есть кнопка, которая называется «Подготовить вопросы». Теперь, когда я нажимаю на эту кнопку, эта кнопка делает две вещи, используя функцию validaton (), она проверяет форму так, чтобы в случае ошибки в форме (пустое текстовое поле и переключатель не были выбраны), то отображались подходящие сообщения об ошибках. на странице. Но кнопка также использует функцию «openSessionPopup», так что она открывает всплывающее окно, в котором указано слово «Session».

Проблема в том, что когда я нажимаю на кнопку, она выполняет обе функции, поэтому отображает ошибки проверки, если они есть, а также открывает всплывающее окно.

Я хочу, чтобы всплывающее окно отображалось только после ошибок проверки. Но я не могу заставить это работать, кто-нибудь еще знает, как это сделать.

Ниже мой код:

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

1 Ответ

1 голос
/ 20 ноября 2011

Сначала вы должны переместить свои обработчики событий из html-разметки.

Затем вы должны привязать обработчик событий к этому событию click.

После этого вы должны изменить свой метод проверки, чтобы он возвращалtrue или false, чтобы обозначить, прошла ли она валидацию или нет.

В заключение вы должны использовать этот результат валидации для условного переноса вашего вызова метода showpopup.

Что-то вроде

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

для вашего обработчика и вот как вы должны его связать

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

Наконец, вы бы изменили свой метод проверки следующим образом:

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

Это заставит ваш метод validation () возвращать false, еслиу вас есть ошибки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...