无法让确认框正常工作,因此我的代码出现错误

发布于 2024-12-17 13:28:54 字数 4233 浏览 6 评论 0原文

我的确认有一点小问题。

在我的代码中包含确认框之前发生的事情是,当我单击按钮(名称= preQuestion)时,如果有任何验证错误,那么它将在页面上显示验证错误,并且如果没有验证,则不会提交表单错误,然后它将提交表单。

但是我现在想做的但无法工作并且一直给我错误的是,如果存在验证错误,那么它将执行目前正在执行的操作,但如果没有验证错误,那么我想要一个出现确认框,说明...,用户将单击“确定”或“取消”。如果用户单击“确定”然后提交表单,如果用户单击“取消”则关闭确认框并保留在同一页面上。我哪里出错了?

下面是 javascript 代码(我缩短了代码,因此它不包含所有验证代码,否则会出现代码溢出):

function validation() {

                var isDataValid = true;

                var sessionNoO = document.getElementById("sessionNo");               
                var questionNumberO = document.getElementById("txtQuestion");
                var roomTextO = document.getElementById("room");

                var errSessionMsgO = document.getElementById("sessionNoAlert");
                var errQuesMsgO = document.getElementById("numberAlert");
                var errRoomMsgO = document.getElementById("roomAlert");

                var trimmedRoomText = roomTextO.value.replace(/^\s+/, '').replace(/\s+$/, '');



   if (sessionNoO.value == ""){
          errSessionMsgO.innerHTML = "Please Enter in the Number of Sessions you Require";
          isDataValid = false;   
    }else if (sessionNoO.value == 0){
        errSessionMsgO.innerHTML = "Number of Sessions Must be More than 0";
          isDataValid = false;
      }else{
                errSessionMsgO.innerHTML = ""; 
            }


    if(questionNumberO.value == 0){
        errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        isDataValid = false;
    } else {
        errQuesMsgO.innerHTML = "";
    } 

          if (roomTextO.value == ""){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number";
          isDataValid = false;
            }else if (!trimmedRoomText.length){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number"; 
          isDataValid = false;      
        }else{
                errRoomMsgO.innerHTML = ""; 
            }

            return isDataValid;

            }

            function submitform()
            {

        var sessionFormO = document.getElementById("sessionForm");

        sessionFormO.submit();

            }

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

                function myClickHandler(){
     if(validation()){

         function showConfirm(){

         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would 
         not be able to go back and change any details towards your Session.Are you sure you want to Proceed?");

         if (confirmMsg==true)
         {
         submitform();   
         }else{
         parent.close();    
         }

     }
}
} 

Html 表单代码(不显示整个表单,因此不会出现代码溢出):

<form action="QandATable.php" method="post" id="sessionForm">
          <p><strong>2: Number of Sessions you Require:</strong> <input type="text" id="sessionNo" onkeypress="return isNumberKey(event)"><br/><span id="sessionNoAlert"></span></p>
            <p><strong>8: Room:</strong> <input type="text" id="room"><br/><span id="roomAlert"></span></p>      <!-- Enter Room here-->
            <table>
            <tr>
            <th>9: Number of Questions:</th>
                <td class="spinner"><input type="text" class="spinnerQuestion" id="txtQuestion" name="textQuestion"></td>
                <td><button class="scrollBtn" id="btnQuestionUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
                <button class="scrollBtn" id="btnQuestionDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
                </tr>
                </table>
                <div id="numberAlert"></div>
                <p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>      <!-- Prepare Questions here-->

        </form>

I have a slight problem with my confirmation.

What happened before I included a confirmation box in my code was that when I click a button (name=preQuestion), if there are any validation errors then it will show validation errors on the page and not submit the form, if there are no validation errors then it will submit the form.

But what I want to do now which I can't get working and which keeps giving me errors is that if there are validation errors then it will do what it is doing at the moment but if there are no validation errors, then I want a confirmation box to appear stating ... and user will click ok or cancel. If user clicks ok then submit form, if user clicks cancel then close confirmation box and stay on same page. Where am I going wrong?

Below is javascript code (I have shorten code so it doesn't include all validation code or it would be a code overflow):

function validation() {

                var isDataValid = true;

                var sessionNoO = document.getElementById("sessionNo");               
                var questionNumberO = document.getElementById("txtQuestion");
                var roomTextO = document.getElementById("room");

                var errSessionMsgO = document.getElementById("sessionNoAlert");
                var errQuesMsgO = document.getElementById("numberAlert");
                var errRoomMsgO = document.getElementById("roomAlert");

                var trimmedRoomText = roomTextO.value.replace(/^\s+/, '').replace(/\s+$/, '');



   if (sessionNoO.value == ""){
          errSessionMsgO.innerHTML = "Please Enter in the Number of Sessions you Require";
          isDataValid = false;   
    }else if (sessionNoO.value == 0){
        errSessionMsgO.innerHTML = "Number of Sessions Must be More than 0";
          isDataValid = false;
      }else{
                errSessionMsgO.innerHTML = ""; 
            }


    if(questionNumberO.value == 0){
        errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        isDataValid = false;
    } else {
        errQuesMsgO.innerHTML = "";
    } 

          if (roomTextO.value == ""){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number";
          isDataValid = false;
            }else if (!trimmedRoomText.length){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number"; 
          isDataValid = false;      
        }else{
                errRoomMsgO.innerHTML = ""; 
            }

            return isDataValid;

            }

            function submitform()
            {

        var sessionFormO = document.getElementById("sessionForm");

        sessionFormO.submit();

            }

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

                function myClickHandler(){
     if(validation()){

         function showConfirm(){

         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would 
         not be able to go back and change any details towards your Session.Are you sure you want to Proceed?");

         if (confirmMsg==true)
         {
         submitform();   
         }else{
         parent.close();    
         }

     }
}
} 

Html form code (not showing whole form so that there is no code overflow):

<form action="QandATable.php" method="post" id="sessionForm">
          <p><strong>2: Number of Sessions you Require:</strong> <input type="text" id="sessionNo" onkeypress="return isNumberKey(event)"><br/><span id="sessionNoAlert"></span></p>
            <p><strong>8: Room:</strong> <input type="text" id="room"><br/><span id="roomAlert"></span></p>      <!-- Enter Room here-->
            <table>
            <tr>
            <th>9: Number of Questions:</th>
                <td class="spinner"><input type="text" class="spinnerQuestion" id="txtQuestion" name="textQuestion"></td>
                <td><button class="scrollBtn" id="btnQuestionUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
                <button class="scrollBtn" id="btnQuestionDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
                </tr>
                </table>
                <div id="numberAlert"></div>
                <p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>      <!-- Prepare Questions here-->

        </form>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

往昔成烟 2024-12-24 13:28:54

我已经对您的代码进行了更正,现在它工作正常,请检查一下
函数验证() {

                var isDataValid = true;

                var sessionNoO = document.getElementById("sessionNo");               
                var questionNumberO = document.getElementById("txtQuestion");
                var roomTextO = document.getElementById("room");

                var errSessionMsgO = document.getElementById("sessionNoAlert");
                var errQuesMsgO = document.getElementById("numberAlert");
                var errRoomMsgO = document.getElementById("roomAlert");

                var trimmedRoomText = roomTextO.value.replace(/^\s+/, '').replace(/\s+$/, '');



   if (sessionNoO.value == ""){
          errSessionMsgO.innerHTML = "Please Enter in the Number of Sessions you Require";
          isDataValid = false;   
    }else if (sessionNoO.value == 0){
        errSessionMsgO.innerHTML = "Number of Sessions Must be More than 0";
          isDataValid = false;
      }else{
                errSessionMsgO.innerHTML = ""; 
            }


    if(questionNumberO.value == 0){
        errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        isDataValid = false;
    } else {
        errQuesMsgO.innerHTML = "";
    } 

          if (roomTextO.value == ""){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number";
          isDataValid = false;
            }else if (!trimmedRoomText.length){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number"; 
          isDataValid = false;      
        }else{
                errRoomMsgO.innerHTML = ""; 
            }

            return isDataValid;

            }

            function submitform()
            {

        var sessionFormO = document.getElementById("sessionForm");

        sessionFormO.submit();

            }

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

    // problem was here             
function myClickHandler()
{
     if(validation())
{
showConfirm();


     }
}


 function showConfirm(){

         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards your Session.Are you sure you want to Proceed? ");

         if (confirmMsg==true)
         {
         submitform();   
         }else{
         parent.close();    
         }
}

I have made correction in your code and now its working fine check it out
function validation() {

                var isDataValid = true;

                var sessionNoO = document.getElementById("sessionNo");               
                var questionNumberO = document.getElementById("txtQuestion");
                var roomTextO = document.getElementById("room");

                var errSessionMsgO = document.getElementById("sessionNoAlert");
                var errQuesMsgO = document.getElementById("numberAlert");
                var errRoomMsgO = document.getElementById("roomAlert");

                var trimmedRoomText = roomTextO.value.replace(/^\s+/, '').replace(/\s+$/, '');



   if (sessionNoO.value == ""){
          errSessionMsgO.innerHTML = "Please Enter in the Number of Sessions you Require";
          isDataValid = false;   
    }else if (sessionNoO.value == 0){
        errSessionMsgO.innerHTML = "Number of Sessions Must be More than 0";
          isDataValid = false;
      }else{
                errSessionMsgO.innerHTML = ""; 
            }


    if(questionNumberO.value == 0){
        errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        isDataValid = false;
    } else {
        errQuesMsgO.innerHTML = "";
    } 

          if (roomTextO.value == ""){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number";
          isDataValid = false;
            }else if (!trimmedRoomText.length){
          errRoomMsgO.innerHTML = "Please Enter in a Room Number"; 
          isDataValid = false;      
        }else{
                errRoomMsgO.innerHTML = ""; 
            }

            return isDataValid;

            }

            function submitform()
            {

        var sessionFormO = document.getElementById("sessionForm");

        sessionFormO.submit();

            }

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

    // problem was here             
function myClickHandler()
{
     if(validation())
{
showConfirm();


     }
}


 function showConfirm(){

         var confirmMsg=confirm("Make sure that your details are correct, once you proceed after this stage you would not be able to go back and change any details towards your Session.Are you sure you want to Proceed? ");

         if (confirmMsg==true)
         {
         submitform();   
         }else{
         parent.close();    
         }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文