We Keep Coding

Submit and cancel buttons are not working, as well as the popup will cause the collapsible panel to close. How do we solve this issue?

Tried testing functions on the submit and cancel buttons but the functions do not seem to be called.
When I press either 'submit' or 'cancel' buttons, they cause the form to close, as well as the modal panel to close. I am trying to make those button close only the form while keeping the modal panel to open.
$(document).ready(function() {
var item = ''
$('.show').click(function() {
item = $(this).attr('href').replace('#', '') //get the value
var target = item + 'zxc'
if (document.getElementById(item).className == 'panel-collapse collapse') {
document.getElementById(target).style.display = 'grid';
} else if (document.getElementById(item).className == 'panel-collapse collapse in') {
document.getElementById(target).style.display = 'none';
}
});
$('.ricedish').click(function() {
target = $(this).attr('id') + 'zxc' //get target id
//alert(target);
document.getElementById(target).style.display = "flex";
});
$('#btncancel').click(function() {
canceltarget = $(this).parentNode().attr('id') //get parent node
alert(canceltarget)
});
});
/* for the forms */
{
box-sizing: border-box;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: relative;
bottom: 0;
top: -100%;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
height: auto;
width: 100%;
padding: 10px;
background-color: white;
border: 3px solid red;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='menu'>
<h1 id='menutitle'><a style='color:red' href='index.html'>Back </a> <br>Menu items </h1>
<div class="panel-group">
<div class="panel panel-primary">
<a data-toggle="collapse" href="#ricedishes" class='show'>
<div class="panel-heading">
<h4 class="panel-title">
Rice Dishes (Additional toppings can be chosen)
</h4>
</div>
</a>
<div id="ricedishes" class="panel-collapse collapse">
<div class="panel-body" id='ricedisheszxc'>
<div class='ricedish' id='chickenrice'>
<div class='pic'></div>
<h4 align='center'>Chicken Rice<br> $3.00</h4>
<div class="form-popup" id="chickenricezxc">
<!-- form -->
<form class="form-container">
<h1 style='margin:0;'>Chicken Rice $3.00</h1>
<h3>Choose the type of chicken:</h3>
<hr>
<input type="radio" name="gender" value="male"> Roasted<br>
<input type="radio" name="gender" value="female"> Steamed<br>
<input type="radio" name="gender" value="other"> Chicken Cutlet
<hr>
<h3> Extra toppings ($0.50 each)</h3><br>
<input type="checkbox" value="egg">Egg<br>
<input type="checkbox" value="chicken">More Chicken<br><br>
<hr> Remarks:
<br> <textarea class="form-control" rows="5" id="remarks"></textarea><br><br><br>
<button class="btn submit" id='btnsubmit' onClick='submit()'>Submit</button>
<button class="btn cancel" id='btncancel'>Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I couldn't get to run your code properly, but your main problem is that you have mixed up javascript and jquery. In jquery we don't have parentNode() function. instead, we have parent(). Always look at the console to understand your javascript bugs.
$('#btncancel').click(function(){
canceltarget = $(this).parent("form").attr('id') //get parent node
alert(canceltarget)
});

Please use jQuery when you have it.
Something like this
$(function() {
$('.show').on("click",function() {
var panelID = $(this).attr('href'); //get the target
var $panel = $(panelID);
var $target = $(panelID + 'zxc');
$target.css({"display":$panel.is(".in")?'grid':'none'});
$panel.toggleClass("in")
});
$('.ricedish').on("click",function() {
$($(this).attr('id') + 'zxc') //get target id
.css({"display":"flex"});
});
$('#btncancel').on("click",function() {
canceltarget = $(this).closest(".panel-body").hide();
});
});
/* for the forms */
{
box-sizing: border-box;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: relative;
bottom: 0;
top: -100%;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
height: auto;
width: 100%;
padding: 10px;
background-color: white;
border: 3px solid red;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='menu'>
<h1 id='menutitle'><a style='color:red' href='index.html'>Back </a> <br>Menu items </h1>
<div class="panel-group">
<div class="panel panel-primary">
<a data-toggle="collapse" href="#ricedishes" class='show'>
<div class="panel-heading">
<h4 class="panel-title">
Rice Dishes (Additional toppings can be chosen)
</h4>
</div>
</a>
<div id="ricedishes" class="panel-collapse collapse">
<div class="panel-body" id='ricedisheszxc'>
<div class='ricedish' id='chickenrice'>
<div class='pic'></div>
<h4 align='center'>Chicken Rice<br> $3.00</h4>
<div class="form-popup" id="chickenricezxc">
<!-- form -->
<form class="form-container">
<h1 style='margin:0;'>Chicken Rice $3.00</h1>
<h3>Choose the type of chicken:</h3>
<hr>
<input type="radio" name="gender" value="male"> Roasted<br>
<input type="radio" name="gender" value="female"> Steamed<br>
<input type="radio" name="gender" value="other"> Chicken Cutlet
<hr>
<h3> Extra toppings ($0.50 each)</h3><br>
<input type="checkbox" value="egg">Egg<br>
<input type="checkbox" value="chicken">More Chicken<br><br>
<hr> Remarks:
<br> <textarea class="form-control" rows="5" id="remarks"></textarea><br><br><br>
<button class="btn submit" id='btnsubmit' onClick='submit()'>Submit</button>
<button class="btn cancel" id='btncancel'>Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

jQuery load modal after an interval only one time per session

I would like to show a modal after 5 seconds, but only once per session (website visit).
This is what I have so far:
$(document).ready(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
This is the codepen for it:
https://codepen.io/uxfed/pen/BmyeEr
I would like this modal to only show one time per website session.

You can put your fading code into body of if statement. I did it via localStorage tool. This code works for me:
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
Code in Snippet doesn't works here, but in your project it would.
function hideDialog(){
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
function question_body(){
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e){
HideDialog();
e.preventDefault();
});
}
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
.instructions {
text-align:center;
font-size:20px;
margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////
// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #40c348;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #40c348;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #5D9E62;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #40c348;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
<p>Sign up for our Deal Alerts and save
$25 Off of your first order of $50 or more!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>

How make a modal transition?

I'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works...
The modal have to be open from the center of the screen or from the screen down side.
I found this code from google :
https://codepen.io/designcouch/pen/obvKxm
But it's really too complicated for me. I can't understand how adapt it with my code...
/*Ouvrir le popup stress */
// Get the modal
var hydricstressmodal = document.getElementById('hydricstressmodal');
// Get the button that opens the modal
var stress = document.getElementById("stress");
// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];
// When the user clicks the button, open the modal
stress.onclick = function() {
hydricstressmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
hydricstressmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == hydricstressmodal) {
hydricstressmodal.style.display = "none";
}
}
/*Ouvrir le popup vegetal */
// Get the modal
var vegetalmodal = document.getElementById('vegetalmodal');
// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");
// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
// When the user clicks the button, open the modal
vegetal.onclick = function() {
vegetalmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
vegetalmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vegetalmodal) {
vegetalmodal.style.display = "none";
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin : auto;
}
/*popup hydric stress*/
.hydricstressmodal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
/* stress Modal Content */
.stress-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popstress img{
width: 20%;
}
/* The Close Button */
.stressclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.stressclose:hover,
.stressclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*popup Vegetal*/
.vegetalmodal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
scale
}
/* stress Modal Content */
.vegetal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popvegetal img{
width: 40%;
}
/* The Close Button */
.vegetalclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.vegetalclose:hover,
.vegetalclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="content">
<h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>
<div id="file" action="" class = "container">
<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
<div class = "text">
Stress hydrique
</div>
</div>
<!-- The hydric stress Modal -->
<div id="hydricstressmodal" class="hydricstressmodal">
<div class="stress-content">
<span class="stressclose">×</span>
<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
<div class = "text">
Biophotonique appliquée aux végétaux
</div>
</div>
</div>
<!-- The vegetal Modal -->
<div id="vegetalmodal" class="vegetalmodal">
<div class="vegetal-content">
<span class="vegetalclose">×</span>
<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<img src="IMAGES/PNG/pont.png" width="100%" />
<div class = "text">
Etudes des ponts photoniques
</div>
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/button.js"></script>

A simple solution with css animations:
$('#open').click(function() {
$('#modalOverlay').show().addClass('modal-open');
});
$('#close').click(function() {
var elem = $('#modalOverlay');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
#modalOverlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
}
#modal {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
text-align:center;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 150ms ease-in-out;
}
#modalOverlay.modal-open #modal {
opacity:1;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
<div id="modal">
<h1>My modal</h1>
<p>This is a simple modal</p>
<button id="close" type="button">Close</button>
</div>
</div>

If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.

You can also use library like bootstrap. For bootstrap modal you can refer below link.
https://getbootstrap.com/docs/4.0/components/modal/

How to code the validation in javascript

I'm very new to Javascript. I have done one template for login, It is working like a charm. Here My question is how to set up the validation and navigation like if(username==root && password==root) then it should redirect into other page. I just post my code. I didn't include the css code. Then i did this code in html in that i have try to write the javascript but i don't know how to handle this.
My code:
<!DOCTYPE html>
<html>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #0077B5;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 10px 0 5px 0;
position: relative;
}
img.cisco{
width: 30%;
border-radius: 30%;
}
.container {
padding: 10px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
/*overflow: auto; Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 5px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 200px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
.Center {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
<body>
<h2><text-align:center>Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" method="post" name="myform">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/cisco1.png" alt="Cisco" class="cisco">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" id="username" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="psw" required>
<button type="submit" id="login" onclick="validate()">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
var attempt = 3; //Variable to count number of attempts
//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "root" && password == "root"){
alert ("Login successfully");
console.log("Redirecting to welcome page...")
window.location = "success_new.html"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");
}
//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>

At last I fix it. The issue here was "return" function on the onclick listener. here is that one
add return before the validate function
<button type="submit" id="login" onclick=" return validate()">Login</button>
Then it's works fine.

var username = document.getElementById('uname');
var pwd = document.getElementById('psw');
document.getElementById("b").onclick = function(){
if(username.value == "root" && pwd.value == "root"){
console.log("Redirecting to welcome page...")
window.location = "welcome.html";
}
}
<h2 text-align:"center">Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block';">Login</button>
<div id="id01" class="modal" style="display:none;">
<form class="modal-content animate" action="">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/logo1.png" alt="Logo" class="logo1">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="button" id="b">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Fixed it. If I were you, I'd go over these and look at each difference to see what went wrong. It should be noted that you shouldn't do client-side validation like this, because anyone can easily:
See the password and username
Go to the url directly
Etc.
You really should do this server-side.

why doesnt my javascript work in my popup Modal

i have a view in which i have a popup modal which gets a search string and search for the details in the database.
the problem is that when i write my search string and press search button, the javascript is not triggered.
The following are my codes
<html>
<head>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script>
$(document).ready(function () {
$("#records_table").on("click", "tr", function () {
$(this).addClass('selected').siblings().removeClass('selected');
var usern = $(this).find('td:nth-child(1)').html();
var name = $(this).find('td:nth-child(2)').html();
var email = $(this).find('td:nth-child(3)').html();
var emails = $(this).find('td:nth-child(4)').html();
document.getElementById("1").value = usern;
document.getElementById("2").value = name;
document.getElementById("3").value = email;
document.getElementById("4").value = emails;
});
$('#openBtn').click(function (event) {
$(".rower").empty();
var search = $('#searchAttr').val();
if (search != '') {
$.getJSON('#Url.Content("~/DBTestAccPAcs/GetRecord")', { search: search }, function (FacilityData) {
$(function () {
for (var i = 0; i < FacilityData.DivID.length; i = i+4) {
$('<tr class="rower">').append(
$('<td>').text(FacilityData.DivID[i]),
$('<td>').text(FacilityData.DivID[i + 1]),
$('<td>').text(FacilityData.DivID[i + 2]),
$('<td>').text(FacilityData.DivID[i + 3])
).appendTo('#records_table');
}
});
});
}
});
});
</script>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<input id="searchAttr" name="searchAttr" />
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<input type="text" id="1" /><input type="text" id="2" /><input type="text" id="3" /><input type="text" id="4" />
<!-- Button to open the modal -->
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
#*<form class="modal-content animate" action="/action_page.php">*#
<div class="modal-content animate">
<div class="container">
<div class="my">
<input id="searchAttr" name="searchAttr" />
<button href="#myModal" id="openBtn" data-toggle="modal" class="btn btn-success">search</button>
</div>
<div id="result">
<div class="table-responsive" style="height:300px; overflow:auto;">
<table id="records_table" border='1' class="table table-bordered table-condensed table-hover table-responsive">
<thead>
<tr>
<th>Vendor Part Number</th>
<th>Description</th>
<th>Location Code</th>
<th>Quantity</th>
</tr>
</thead>
<tbody id="getrid"></tbody>
</table>
</div>
</div>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
any help will really be appreciated.
Thanks