How to add next previous buttons on the popup? - javascript

I tried to add the next button on the popup box. Now it is run popups in a specific order. Also, when the final popup open, the button disable automatically. but there is an issue. when I delete some modal, the code is not working. I want to run popups in that order and when I delete some popup, the popups want to run correctly. Also, I want to create the previous button. how can I do it? please help me to fix the issue.
Here is the code I used.
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment2").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal--)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment2").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
https://jsfiddle.net/Sanjeewani/q1tm8ck2/38/

I'm not exactly sure if this is what you want. But i tried rewriting your js a bit.
$(document).ready(function() {
var data=[];
currentModal = 0;
$('.modalDialog').each(function(){
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#'+data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
//prev
$('.getAssignment2').click(function(){
if (currentModal>0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
//next
$('.getAssignment').click(function(){
if (currentModal<data.length - 1) {
currentModal++;
if (currentModal===data.length - 1) $('#'+data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment{
cursor:pointer;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder=3>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
X
<h2>Modal Box 3</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
</body>

Related

How to add clickevent to retrieve input text and run function accordingly?

I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
/*Html & body theme*/
*{
margin:0;
padding:0;
box-sizing: border-box;
}
html{
font-family:"lato",Arial,sans-serif;
}
body {
width: 100%;
height: 100vh;
color:black;
background: linear-gradient(-45deg, rgba(8,19,114,1) 6%, rgba(0,212,255,1) 42%, rgba(231,246,246,1) 82%);
}
/*container properties*/
.grid-container {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
}
.grid-container:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#box {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition:0.3s;
border-radius:5px;
}
#box{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
border-radius: 5px;
}
.grid-item-1{
height: 150px;
width:1880px;
position:fixed;
left:10px;
top:20px;
font-size:100px;
text-align:center;
}
.grid-item-2{
height: 600px;
width:500px;
position:fixed;
left:10px;
top:350px;
}
.grid-item-3{
height: 300px;
width:1370px;
position:fixed;
left:520px;
top:180px;
}
.grid-item-4{
height:450px;
width:1370px;
position:fixed;
left:520px;
top:500px;
}
.grid-item-5{
height: 150px;
width:500px;
position:fixed;
left:10px;
top:180px;
font-size: 30px;
}
/*Search Bar Properties*/
form.searchInput input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.searchInput button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.searchInput button:hover {
background: #0b7dda;
}
form.searchInput::after {
content: "";
clear: both;
display: table;
}
form.searchInput {
top:30px;
bottom:40px;
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="Stylesheet" href="WeatherDashboardStylesheet.css" type=text/CSS>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<title>WeatherDashboard</title>
</head>
<body>
<div class ="grid-container">
<div id="box" class="grid-item-1">
WeatherDashboard ⛅
</div>
<div id="box" class="grid-item-2">
Item 2
</div>
<div id="box" class="grid-item-3">
Item 3
</div>
<div id="box" class="grid-item-4">
<div id="display" class="display-box">
<p class="city"></p>
<img class="icon">
<p class="date"></p>
<p class="weather"></p>
<p class="temp"></p>
<p class="humidity"></p>
<p class="wind"></p>
</div>
</div>
<div id="box" class="grid-item-5">
Search for a City:
<form class="searchInput" style="margin:auto;max-width:300px">
<input id=input class="input1" type="text" placeholder="Search..." name="search" value="">
<button onclick="myfunction()" id="button" class="button1" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<script rel="Script" src="WeatherDashboardScript.js" type=text/javascript></script>
<script src="https://api.openweathermap.org/data/2.5/forecast?q=chicago&appid=dc171ae0b3b507207c6605cbab0a5f98"></script>
</body>
</html>
Hello, I am trying to add a onclick or click event that will allow someone to input a city and retrieve said city's weather information. I had added a event listener to the api function however it does not seem to work. Please help?
You've got a few problems with your html and your js.
First with your js. In your file, all the code is in 'the main' and is being executed as soon as the file loads. You dont want that, you want to create a function so you can use it to link it with the 'onclick' event. You that simply by wrapping your code in a function like this:
function myfunction() {
$.getJSON("https://api.openweathermap.org/data/2.5/forecast?q="+City+"&appid=dc171ae0b3b507207c6605cbab0a5f98",
function(data){
console.log(data);
var icon ="https://openweathermap.org/img/w/" + data.list[0].weather[0].icon +".png";
var temp=Math.floor(data.list[0].main.temp);
var weather=data.list[0].weather[0].main;
var city=data.city.name;
var date= data.list[0].dt_txt;
var humidity=data.list[0].main.humidity;
var wind=data.list[0].wind.speed;
$(".icon").attr("src",icon);
$(".weather").append(weather);
$(".temp").append(temp);
$(".city").append(city);
$(".date").append(date);
$(".humidity").append(humidity);
$(".wind").append(wind);
});
}
After that, I see you've got a variable called City inside your request which has no value. Your code has to know what is that and be able to retrieve its value. For that we call the 'document' object which contains the input and take its value. Like this:
var City = document.getElementById('input').value;
console.log(City) // Print it for good meassure
With that inside your function, every time you click the button, the value is going to be updated and do the request.
Now, in your html you need to change your button's type property. If its of type submit, the form is submited and the page reloaded (The whole form is unnecesary really but I'll leave it in as to not change your code too much). In this case you want your button to be of type 'button' so it only acts as a button when pressed. Like this:
...
<form class="searchInput" style="margin:auto;max-width:300px" >
<input id="input" class="input1" type="text" placeholder="Search..." name="search">
<button onclick="myfunction()" id="button" class="button1" type="button"><i class="fa fa-search"></i></button>
</form>
...
With all that your code should work, retrieve your json and display the information you want on screen.
I hope all of this helps!

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 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 isn't this HTML button functioning

I am working through "Google Apps Script" by James Ferreira.
I have found several issues with code examples given so far and have been able to stumble my way through them.
I'm not great with HTML and this one has me stumped.
.gs
function startWorkflow() {
var html = HtmlService.createTemplateFromFile('startWorkflow').evaluate()
.setTitle('Start Workflow').setWidth(300)
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
ui.showSidebar(html);
}
.html
<div id="wrapper">
<div>
<span>Let's get started with your workflow.
First;
Add an approver by entering their email address
in the Approvers box and clicking the add button.
When you are done adding appovers, click the Start Workflow button.</span>
</div>
<br>
<div>
<span class="sectionHeader">Approvers</span><br>
<div id="approvers"></div>
<div>
<form id="addApprover">
<input type="email" id="approver" placeholder="Email Address">
<input type="submit" class="button blueButton" value="Add">
</form>
</div>
<br>
<div class="center">
<span id="startButton" class="button redButton">Start Workflow</span>
</div>
</div>
<?!= HtmlService.createHtmlOutputFromFile('styles').getContent(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
styles.html
<style type="text/css">
.sectionHeader {
color: #202020 ;
font-size: 18px;
text-decoration:underline;
margin-bottom: 20px;
}
.button {
color: #FFFFFF;
font-size: 12px;
moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 3px;
border:0;
}
.blueButton {
background-color: #3366FF;
}
.redButton {
background-color: #C80000;
}
.button:hover {
opacity:0.7;
}
.center {
text-align: center:
}
#wrapper {
margin:2px 4px 3px 4px;
font-family: Verdana, Generva, sans-serif;
}
.reminder {
color: #FFFFFF;
background-color: #3366FF;
font-size: 10px;
moz-border-radius: 3x;
-webkit-border-radius: 3px;
padding: 3px;
}
The issue is with the "start workflow" button as I only have text.
This is the the HTML you are referencing:
<span id="startButton" class="button redButton">Start Workflow</span>
The span tag does support events like onclick and onmouseup. It would look like this:
<span id="startButton" class="button redButton" onmouseup="fncStartWorkFlow()">Start Workflow</span>
There needs to be a corresponding function in a <script> tag:
<script>
function fncStartWorkFlow() {
console.log('fncStartWorkFlow() ran!');
//more code here
};
</script>
Make those changes, then view the browser console to see if a message printed to the console.

Button not clickable

I have created page that would allow the user to enter information then submit that to js for validation and modification of a database. The page should have a pop up that notifies the user is successful or not. The pop up is color coded for errors or informational messages.
However, it needs a way to remove the pop once the user acknowledges the message. There is a button on the pop up (div) that appears and had the event listener on the button but the button is not clickable.
The html code:
<div id="panel">
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/msd.css"></link>
<script src="/static/lib/d3-3.3.8.min.js"></script>
</head><div id="info-msg">
<p></p>
<button id="ok">Ok</button>
</div>
<div id="reportAnomaly" >
<table id="anomaly-table" cols="2">
<tr>
<td>
<input id="submit" type="submit" value="Submit">
</td>
<td>
<input id="reset" type="reset" value="Reset Form">
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="static/js/dbanomaly.js"></script>
</body>
</html>
The JavaScript code:
var infoMsgDiv = d3.select("#info-msg");
d3.select("#submit").on('click', reportAnomaly);
d3.select("#reset").on('click', resetForm);
d3.select("#ok").on('click', resetForm);
function reportAnomaly() {
insertResults();
}
function insertResults () {
displayMessage('warn', "Successfully added.");
}
function resetForm () {
_log("resetForm");
infoMsgDiv.style("opacity", 0);
}
function displayMessage (level, message) {
_log("displayMessage");
if (level === 'crit') {
infoMsgDiv.style("background-color", "red");
} else if (level === 'warn') {
infoMsgDiv.style("background-color", "yellow");
}
infoMsgDiv.style("opacity", 1);
infoMsgDiv.select("p").html(message);
}
the CSS is:
#info-msg {
position: absolute;
top: 0;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
border: 1px solid #ddd;
border-radius: 10px;
font: 10pt sans-serif;
text-align: center;
line-height: 1.2em;
opacity: 0;
transition: opacity 500ms ease-in 250ms;
pointer-events: none;
color: black;
}
#info-msg{
top: 50%;
left: 50%;
padding: 10px;
background-color: #FFFF9F;
}
Any ideas why the "#ok" button would not be clickable?

Categories