Question

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>

Answer 1

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