Thulaz Thulaz - 5 days ago 5
CSS Question

The alert for wrong password keeps displaying, even after I click ok using Javascript. How do I stop this continuous display of the alert message

I've been trying to validate a password text in a Modal window. When I enter the the incorrect password the alert keeps on displaying "Login is incorrect" message. Seems the while loop I am using, keeps continuing. How do I make the alert message display only once. But the Modal window should keep displaying



var modal = document.getElementById('loginModal');

// Get the button that opens the modal
var btn = document.getElementById("loginBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

function promptPassword( )
{

while (document.getElementById("pwdText").value != 'P@ssw0rd'){
alert("Login is incorrect");
document.getElementById('pwdText').value = "";

}

alert("Password is correct, you are allowed to enter the site");

}

.modal {
display: none; /* Modal not shown by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the modal box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */

}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 25%;
height: 25%;
}


/*Display of text box labels*/
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: left;
}
label {
display: inline-block;
float: left;
}

/*Display of text and password boxes*/
input[type=text] {
width:250px;
}

input[type=password] {
width:250px;
}


/* Close Button */
.close {
float: right;
margin: -15px -15px 0 0;
font-size: 28px;
font-weight: bold;
}


.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}

<!-- Login button to pen Modal box -->
<button id="loginBtn">Login</button>

<!-- The Modal box-->
<div id="loginModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<form>
<br/>
<label>User Name</label><input id="userName" type="text"><br />
<br/>
<label>Password</label><input id="pwdText" type="password"><br />
<br/>
<button onclick="promptPassword()">Submit</button>
</form>

</div>





I need to do this without using Jquery

Answer

First you need to replace

<button onclick="promptPassword()">Submit</button>

to

<button onclick="return promptPassword()">Submit</button>

Then you need to use only this

function promptPassword( )
{
    var pwd = document.getElementById("pwdText").value;
    if(pwd != 'P@ssw0rd'){
        alert("Login is incorrect");
        document.getElementById('pwdText').value = "";
        return false;
    }
    else{
        alert("Password is correct, you are allowed to enter the site");    
        // Enter Site Code Here
    }
}
Comments