if(jQuery('.required_content').length){
jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_content').first().offset().top - 96}, 'fast');
}
Here is my fiddle
How you see I have a form and with js I am doign its validation, it is ok, my issue is connected with scrolling to the first error message every time when we will have empty input field. But seems code isn't working at all.
As per your code in jsFiddle, You have used lot of in-line styles.
Also you don't have to write if condition for each field.
So I have Cleaned up the code.
And this works for me.
<!doctype html>
<html lang="en">
<head>
<title>Form</title>
<style type="text/css">
.second_indiv_step_wrap {
margin: 20px;
}
.second_indiv_step_wrap > div {
margin:20px 0 0 0;
}
label {
display:block;
}
input {
display:block;
width:250px;
}
textarea {
display:block;
width:250px;
resize:none;
height:200px;
}
.next_second {
margin-top:20px;
padding: 10px 15px;
cursor:pointer;
display:inline-block;
}
.required-field {
border: 1px solid rgb(11, 75, 132);
min-height: 52px;
font-size: 18px;
text-align: center;
color: rgb(102, 102, 102);
background: rgb(255, 255, 255);
}
.required_content, .error_x_white {
display:none;
color:rgb(244, 73, 68);
}
.show {
display:block;
}
.error {
border:0 none;
background: rgb(244, 73, 68);
}
</style>
</head>
<body>
<div class="second_indiv_step_wrap">
<div class="surname">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="surname">Surname</label>
<input type="text" name="Surname" id="surname" class="required-field">
</div>
<span class="error_x_white">Please enter surname.</span>
</div>
<div class="firstname">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="firstname">First Name</label>
<input type="text" name="FirstName" id="firstname" class="required-field">
</div>
<span class="error_x_white">Please enter first name.</span>
</div>
<div class="country_citizenship">
<span class="required_content">Required</span>
<div class="fieldWrap placeholder-hide">
<label for="autocomplete">Country</label>
<input type="text" name="autocomplete" id="autocomplete" autocomplete="off" class="ui-autocomplete-input required-field">
</div>
<span class="error_x_white">Please enter your country.</span>
</div>
<div class="residental_address">
<span class="required_content">Required</span>
<div class="fieldWrap">
<label for="pinrestextarea">Address</label>
<textarea id="pinrestextarea" name="Principal residential address" class="required-field"></textarea>
</div>
<span class="error_x_white">Please enter your address.</span>
</div>
<button class="next_second">Submit this form</button>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('.next_second').on('click', function () {
$('.required-field').each(function () {
if ($(this).val() == '') {
$(this).addClass('error');
$(this).parent().parent().find('.required_content').addClass('show');
$(this).parent().parent().find('.error_x_white').addClass('show');
} else {
$(this).removeClass('error');
$(this).parent().parent().find('.required_content').removeClass('show');
$(this).parent().parent().find('.error_x_white').removeClass('show');
}
});
setTimeout(function () {
$('.second_indiv_step_wrap .error').first().focus();
$('.error').unbind('keypress');
$('.error').bind('keypress', function(){
$(this).removeClass('error');
});
}, 100);
});
</script>
</body>
</html>
Related
I'm having difficulty implementing localStorage on my site (https://www.reclaimdesign.org).
What I am trying to do is:
Newsletter subscription pop-up on each page - this works fine
Click X to close the subscription pop-up - this also works fine
Remember the closed state of the window so that all other pages visited on our site don't have the pop-up and irritate the user after they have closed the pop-up already - this is not working. Not even a little bit.
My thinking was to set a variable with localStorage and then refer to the variable to see if the windows should be displayed or not. It is highly likely that my logic and syntax are at best sketchy, so if anyone could please guide me in the correct method this would be much appreciated.
The code I have been tinkering with for the subscription pop-up looks like this:
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
$(window).on("load", function() {
if(localStorage.getItem("popState") == 'hide'){
//$(".signup").hide();
$(".signup").css("display", "none");
}
else if (localStorage.getItem("popState") != 'hide'){
$(".signup").css("display", "block");
}
});
}
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="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>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
Yes your getSignup is not called correctly.
Here you can see the alternative solution without jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
if (localStorage.getItem("popState") == 'hide') {
//$(".signup").hide();
document.querySelector('.signup').style.display = 'none';
} else if (localStorage.getItem("popState") != 'hide') {
document.querySelector('.signup').style.display = 'block';
}
}
window.addEventListener("load", getSignup);
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="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>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks very much for your input guys. I got it working with the following (for anyone who might come up against the same issue)...
HTML:
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="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;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
CSS:
.signup {
bottom: 2%;
display: none;
margin-right: -15px !important;
max-width: 280px;
position: fixed;
right: 2%;
z-index: 9999;
}
.signup-header {
background: #539c22;
border-radius: 10px 10px 0 0;
color: #ffffff;
font-family: 'Carrois Gothic', sans-serif;
font-size: 20px;
padding: 25px 15px;
text-transform: uppercase;
}
.signup-container {
background-color: #6db240;
border-radius: 0 0 10px 10px;
color: #ffffff;
padding: 15px;
}
.closebtn {
color: #ffffff;
cursor: pointer;
font-size: 30px;
position: absolute;
right: 15px;
top: 5px;
}
.closebtn:hover {
color: #6db240;
}
.signup-container .button {
background-color: #539c22;
border: 0 none;
border-radius: 5px;
color: #ffffff !important;
cursor: pointer;
font-size: 15px;
height: 32px;
line-height: 32px;
margin: 0 15px 0 0 !important;
text-align: center;
transition: all 0.23s ease-in-out 0s;
width: 100% !important;
}
.signup-container .button:hover {
opacity: 0.7;
}
.signup-container .mc-field-group input {
display: block;
padding: 8px 0;
text-indent: 2%;
width: 100%;
}
.signup-container input {
border: 1px solid #d0d0d0;
border-radius: 5px;
cursor: auto;
font-family: 'Open sans', sans-serif;
font-size: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
JQuery:
$(document).ready(function() {
$('.signup').css('display', 'block');
$PopUp = $('.signup');
var hide = JSON.parse(localStorage.getItem('hide'));
if (hide) {
$PopUp.hide();
} else {
// initialize value in case it hasn't been set already
localStorage.setItem('hide', false);
}
$('.closebtn').click(function() {
$('.signup' ).hide();
// toggle the boolean by negating its value
var hide = JSON.parse(localStorage.getItem('hide'));
localStorage.setItem('hide', !hide);
});
});
I want to validate a login form. It iss working fine when I validate just mobile numbers. If I validate both mobile and password, then only the last one is working – rest is not working well. Can anybody help me, what is wrong in this code?
What I tried:
function loginValidation() {
if ($('[name="mobileNo"]').val() == '') {
$('.validation_error').text('Mobile number is reuired').addClass('validation_active');
} else {
$('.validation_error').text('').removeClass('validation_active');
}
if ($('[name="loginPassword"]').val() == '') {
$('.validation_error').text('Password is reuired').addClass('validation_active');
} else {
$('.validation_error').text('').removeClass('validation_active');
}
setTimeout(function() {
$('.validation_error').text('').removeClass('validation_active');
}, 3000);
};
.validation_error {
position: fixed;
bottom: 20px;
width: 80%;
height: auto;
text-align: center;
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: #ee2e24;
z-index: 10000;
color: #fff;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 2px 4px 39px #333;
transition: all 0.45s;
transform: translateY(100px);
}
.validation_active {
transform: translateY(0px);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div id="loginBox">
<div class="form-group">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-phone"></i></span>
</div>
<input type="text" class="form-control" placeholder="Mobile No" name="mobileNo">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="loginPassword">
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block btn-lg" onclick="loginVelidation();">Login</button>
</div>
</div>
<div class="validation_error"></div>
Now is password is reuired is display when i click on login button. But first i want to validate mobile is reuired
Can you try like below :
function loginVelidation()
{
if ($('[name="mobileNo"]').val() == '') {
$('.validation_error').text('Mobile number is reuired').addClass('validation_active');
}
else if ($('[name="loginPassword"]').val() == '') {
$('.validation_error').text('Password is reuired').addClass('validation_active');
else {
$('.validation_error').text('').removeClass('validation_active');
}
setTimeout(function() {
$('.validation_error').text('').removeClass('validation_active');
}, 3000);
};
Your code is right but you are overriding the error message $('.validation_error') if you want to show both errors then you to create separate error holder element.
I want my 'sales bar' to slid-up after the user click the close 'x' button.
it was all working fine -with the close button - but then I added a form, and if I put the close button inside the form (to get it in-line) then the slideUp only last a second, and the bar slides back down - it should stay 'gone'.
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
</style>
</head>
<body>
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast');
});
}
});
</script>
</body>
</html>
(credit to https://www.buildersociety.com/threads/hellobar-free-alternative-devseries.1519/)
To be clear; If I make this modification (below) moving the close button outside the form. The behavior is correct. But the button is below the form
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button>
</div>
</form>
×
How about hide() after slideUp()?
$('.top-general-alert').slideUp('fast').hide('fast');
EDIT: form buttons cause page reload. Add type=button or type=reset will do work.
Full example below:
$(document).ready(function() {
if ( $('.top-general-alert').length > 0 ) {
$('.top-general-alert').delay(800).slideDown('medium');
$('.close-top-general-alert').click( function() {
$('.top-general-alert').slideUp('fast').hide('fast');
});
}
});
body {
margin: 0px;
}
.top-general-alert {
padding: 8px;
border: none;
font-size: 1em;
line-height: 2em;
text-align: center;
display: none;
background-color: #00294e;
color: #ffee7a;
}
.top-general-alert {
color: #fff;
}
.top-general-alert a,
.top-general-alert a:hover {
color: #0099cc;
}
<div class="top-general-alert" >
<form class="form-inline">
<div class="form-group">
<label for="newsletter">Sign-up for our newsletter! </label>
<input type="email" class="form-control" id="newsletter" placeholder="Your Email...">
<button type="submit" class="btn btn-default">Sign-up!</button> <button type="reset" class="close-top-general-alert" >×</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am trying to create a login form. Here is the example..
.log {
margin-top: 40px;
margin-left: 30px;
margin-right: 30px;
position: relative;
}
.log input[type="text"] {
font-size:13px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.log input[type="password"] {
font-size:13px;
padding: 5px 10px 5px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.inputlog:focus { outline:none;}
.log label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left: 5px;
top: 5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input.inputlog:focus ~ label, input.used ~ label {
top: -20px;
color: #4a89dc;
}
.bar {
position:relative;
display:block;
width:100%;
}
.bar:before, .bar:after {
content:'';
height:2px;
width: 0;
bottom:1px;
position:absolute;
background: #1ba4df;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after {
width:50%;
}
<div class="form-desc">
<div class="lock-icon">
<img src="assets/img/icon/padlock.png">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password">
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div class="login-btn">
<h4>LOGIN</h4>
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
</div>
Here now if click on the fields, the border bottom color is change to Blue.
Suppose if the fields are empty and if I am click on the login button, How to change of the border bottom color Blue to Red? Means it should show these are required field like that.
I need only the border color change to Red.
Thank you.
Try this code.
Plunker LINK
HTML
<div class="log">
<input id="user" class="inputlog" type="text" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input id="pwd" class="inputlog" type="password" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
JS
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
CSS
.makeRed{
border-bottom: 1px solid red !important;
}
using this jQuery
$('form').find('input').each(function(){
if($(this).prop('required')){
$(this).parent().find('.bar')addClass('red-bar');
} else {
$(this).parent().find('.bar')removeClass('red-bar');
}
});
and CSS
.bar.red-bar:before, .bar.red-bar:after {
background: red;
}
Hope, this will help to get idea to solve your problem, HTML with edited login button
<div class="form-desc">
<div class="lock-icon">
<img src="">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div>
<input class="login-btn" type="submit" value="login">
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
JQuery
$(".login-btn").on("click",function(){
var text = $("input[type='text']");
var pass = $("input[type='password']");
if(!text.val()){
text.css("border","2px solid red");
}
if(!pass.val()){
pass.css("border","2px solid red");
}
});
This work for me
var Error_Flag = false;
$('.Signin_Form').find('input').each(function(){
if($(this).attr('required')){
if($(this).val() == ''){
$(this).css({'border': '1px solid #FFB74D'});
Error_Flag = true;
}
else
{
$(this).css({'border':''});
}
}
});
$('.Signin_Form input').on('keyup',function(event) {
if($(this).val() != ''){
$(this).css({'border':''});
}
});
if(Error_Flag){
return;
}
I have been trying to get this to work for a while now. I cannot connect the login function to the form.
I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="util.js"></script>
<script src="JavaScript.js"></script>
<script type="text/javascript"></script>
<style>
#container {
width: 1200px;
}
#map {
width: 80%;
min-height: 600px;
/*float: right;*/
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#img {
width: 150px;
height: 150px;
float: left;
margin-top: auto;
}
/*sökruta*/
#searchBox {
background-color: #ffffff;
padding: 5px;
font-family: 'Roboto','sans-serif';
margin-bottom: 10px;
float: top;
}
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
*/
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.form-group {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body id="container">
<img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
<div class="row">
<br>
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label id="Search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
</form>
</div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
</script>
</div>
</body>
JavaScript.js
function login() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
}
I have created working JSFiddle - Please Check : https://jsfiddle.net/5w6fg52m/1/
Below Code working fine :
<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
return false;
}
</script>
//HTML
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
</form>
</div>
-> I have created other version of JSFiddle, so you come to know conflict issue easily: https://jsfiddle.net/5w6fg52m/2/
Here i have keep function name same(login) and change ID of submit button.
You can set the submit event directly to your like
document.getElementById("loginForm").onsubmit = function() { ... };
Bellow a sample snippet :
window.onload = function(){
document.getElementById("loginForm").onsubmit = function() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if (username === "admin" &&
password === "123") {
alert("validation succeeded");
//location.href = "adminView.php";
} else {
alert("validation failed");
//location.href = "index1.html";
}
// to prevent submit
return false;
}
}
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in">
</form>
</div>
This happens when you declare variable or function with the same name as declare before. just rename login function or rename id="login".