I have a problem with my confirmation box. The problem is that when I click on a button, it will display the confirmation box, if I click OK then it will close the confirmation box and quickly open up the same confirmation box asking the same thing, if I click OK again then it submits the form. It does the same for Cancel where if I click Cancel for first time then confirmation box closes and reappears again asking to confirm again, if I click Cancel again then it closes the confirmation box.
It gets worse, if I click OK for the first confirmation for example then click Cancel for second confirmation, then it will show third confirmation and if I click OK then 4th confirmation box will appear after third one closes and etc.
I obviously want Confirmation box to appear once and if user Clicks OK, then submit form else close confirmation box. So what I want to know is why is it doing this. I have no errors in error console and I can’t really see problem with my code:
Below is Code: (I included all relevant functions so you understand what each function does)
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Create a Session</title>
<script type="text/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 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();
}
}
function submitform()
{
var sessionFormO = document.getElementById("sessionForm");
sessionFormO.submit();
}
</script>
</head>
<body>
<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>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>
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
if(validation()){
showConfirm();
}
}
</script>
</body>