JavaScriptで確認ボックスがあります。確認ボックスは機能しますが、わずかな不具合があります。確認ボックスが表示されたら、[OK] または [キャンセル] をクリックすると、ボックスが閉じて再度開き、もう一度確認するよう求められます。[OK] または [キャンセル] を 2 回クリックすると、フォームが送信されます。確認が 2 回表示されるのはなぜですか?
以下はコードです: (myClickHandler()
はボタンvalidation()
の関数で、フォームの検証が行われる関数です)
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();
}
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();
}
}
Html コード (フォームを送信して確認ボックスを表示するボタンは次のとおりです):
<form action="QandATable.php" method="post" id="sessionForm">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>
</form>