Question

我有一个名为“准备问题”的按钮。现在，当我单击此按钮时，此按钮执行两项操作，使用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>

Answer 1

首先，您应该将事件处理程序移出html标记。

接下来，您应该将事件处理程序绑定到该单击事件。

之后你应该修改验证方法以返回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。

如果没有验证错误，我想要弹出窗口出现

1 个答案: