Bootsrap Show Password, Not Working - javascript

I have an issue with my bootstrap show password eye icon, only appearing half of it I have tried everything that I can think of, including the following:
Removing other CSS/SCSS scripts
Altering the append input class.
Here's My issue demo here ill add relevant code only also below:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
What really does work? only if i add the exact bootstrap code css does the eye work, but that also makes the rest of my sites css get screwed up! Demo of what I mean:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
Relevent code:
Password Input Field
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100" data-toggle="password">
</div>
</div>
</div>
Bootstrap CDN CSS I use:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-
eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-
warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-
plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-
gift:before{content:"\e102"}.glyphicon-
leaf:before{content:"\e103"}.glyphicon-
fire:before{content:"\e104"}.glyphicon-eye-
open:before{content:"\e105"}.glyphicon-eye-
close:before{content:"\e106"}.glyphicon-warning-
sign:before{content:"\e107"}.glyphicon-
plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
Demo Of just The one input:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://antimalwareprogram.co/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-body">
<form>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
JSFiddle With Just Input field
Note: It works only when a ad blocker is enabled but only shows a emoji then!
Another Note: With Font Awesome, it doesnt show anything with ad blocker, but without it is still half an eye!


The bootstrap css that you are including is different to the JS that you are including. Use the official CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Also, make sure you close all your tags. Unclosed tags can do strange things to the layout.
Here is a working fiddle: https://jsfiddle.net/sveynh3z/


Apologies for being late to the party but I see that some of the snippets here don't appear to be working correctly so here's my one. Should it be of any use.
If you're getting an error viewing the snippet (using Chrome), please use the JSFiddle.
var timeoutId = 0;
$('#check').on('mousedown', function() {
$('#eye').removeClass( "glyphicon glyphicon-eye-close" );
$('#eye').addClass( "glyphicon glyphicon-eye-open" );
$('#password').attr('type', 'text');
timeoutId = setTimeout(1000);
}).on('mouseup mouseleave', function() {
$('#password').attr('type', 'password');
$('#eye').removeClass( "glyphicon glyphicon-eye-open" );
$('#eye').addClass( "glyphicon glyphicon-eye-close" );
clearTimeout(timeoutId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Show Password Example:</h3>
<div class="input-group">
<input type="password" id="password" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="check"><span id="eye" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>

Related

calling javascript function from php post request

I'm trying to make the page to load a form using javascript function called from PHP REQUEST
first the form action page should pass [ products count ] input value and define it as PHP var
at least call the javascript function with the passed param,
So What did I do wrong?
Code Snippet:-
<?
include("..\include\basket-module.php");
// notifications //
include("..\\include\\notif-module.php");
// module //
include("..\\include\\Insert-module.php");
?>
<html>
<head>
<title>Project - new Draft</title>
<meta charset="utf-8">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS -->
<link rel="stylesheet" type="text/css" href="..\Styles\profile.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newdraft.css">
<link rel="stylesheet" type="text/css" href="..\Styles\newproduct.css">
<link rel="stylesheet" type="text/css" href="..\Styles\navegationbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap4 Library and Font-awesome with Custom CSS End-->
<!-- including custom javascript -->
<script src="..\js\functions\js.js"></script>
<script>
function myFunction(){
var formscount = <?php echo(json_encode($productscount)); ?>;
if (formscount > 0) {
active="";
for (i=0; i < formscount; i++) {
var str='active'
if (i > 0){
str = ''
}
$('#demo').append($('<div class="carousel-item '+str+'"> <div class="card product-form" style="border: solid 1px #86377b !important;"><div class="card-body"> <img src="..\\upload\\panadol.png" style="width:205px; height:205px;"> <div class="row justify-content-center"> <a name="img-upload-btn" id="img-btn" class="btn btn-primary btn-block" style="height:35px; background-color:#86377b !important;" href="#" role="button">إضافة صورة</a> </div> <hr /> <div class="card-text" style="font-family: hana; font-size:23px; color:black;"> <div class="row" style=" flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group product-name-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px; ">إسم المنتج</div> <input type="text" class="form-control product-name-input" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;" autocomplete="off" placeholder="إسم المنتج"> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group dosage-form-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">نوع العبوة</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>نوع الدواء</option> <option value="1">أدوية</option><i class="fas fa-capsules"></i> <option value="2">مستلزمات الام والطفل</option> <option value="4">معدات طبية</option> <option value="4">بروتينات ومكملات غذائية</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group productqty-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الكمية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكمية"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group stock-code-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">كود المنتج</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="الكود"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group chemicalcom-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيبة الكيميائية</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="التركيبة الكيميائية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group concentration-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">التركيز</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="تركيز الدواء"></input> </div> </div> </div> <hr /> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group packsize-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">حجم العلبة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="حجم العلبة"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group mandate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتاج</div> <input type="date" id="mandate_#" name="mandate1" class="mandate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group expdate-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">تاريخ الإنتهاء</div> <input type="date" id="expdate_#" name="expdate1" class="expdate-input" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;"></input> </div> </div> </div> <div class="row" style="flex-direction: row-reverse;"> <div class="col-sm col-lg-auto"> <div class="form-group sale-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">الخصم</div> <select class="custom-select" onchange="yesnoCheck(this);" id="medictype" style="direction:RTL; font-family:hana; border: solid 1px #86377b !important;"> <option selected>الخصم على المنتج</option> <option value="1">نعم</option><i class="fas fa-capsules"></i> <option value="2">لا</option> </select> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group discou-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">قيمة الخصم</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="قيمة مئوية"></input> </div> </div> <div class="col-sm col-lg-auto"> <div class="form-group bounsfor-group"> <div class="form-text" style="text-align: right; direction:RTL; color:black;font-size:23px;">القطع المخصومة</div> <input type="text" name="p-count" class="form-control float-right" style="font-family:hana;direction:RTL; border: solid 1px #86377b !important;" autocomplete="off" placeholder="على كل (10) قطع"></input> </div> </div> </div> <hr /> <center> <nav class="navbar counter justify-content-center" style="width:70vh; background-color:#86377b;"> <a class="navbar-brand" style="font-family:tahoma; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">'+i+' / '+formscount+'</a> </nav> </center> </div></div></div></div>')); event.preventDefault()
}
}
}
</script>
<!-- Fontawseome Kit -->
<script src="https://kit.fontawesome.com/d75f59893e.js" crossorigin="anonymous"></script>
</head>
<body>
<?php
if($_SERVER['REQUEST_METHOD'] == 'post')
{
if(!$_POST['productscount']=='')
{
echo '<script> myFunction(); </script>';
}
}
?>
<!-- Bootstrap Jquery JavaScripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Bootstrap Jquery JavaScripts -->
<!-- Bootstrap Jquery JavaScripts Ends -->
<!-- navegtion bar bootstrap 4 -->
<?php include("..\\home\\navbar.php"); ?>
<!-- basket sidebar -->
<?php include("..\\home\\basket.php"); ?>
<!-- Main Products Form -->
<center>
<div class="card justify-content-center cont">
<div class="card-body">
<div class="card-text">
<nav class="navbar header justify-content-center">
<a class="navbar-brand" style="font-family:hana; font-size:28px; text-shadow:4px 4px rgba(0,0,0,1); color:white;">إدخال المنتجات</a>
</nav>
<hr />
<center>
<div id="demo" class="carousel slide" data-interval="false" style="height:50vh;">
<!-- The slideshow -->
<div class="carousel-inner canner">
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev d-none d-md-block" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon grow" style="filter:invert(100%); height:50vh; position:relative; left:-4vh;"></span>
</a>
<a class="carousel-control-next d-none d-md-block" href="#demo" data-slide="next">
<span class="carousel-control-next-icon grow" style="filter:invert(100%); height:50vh; position:relative; right:-4vh;"></span>
</a>
</div>
</center>
</div>
</div>
</div>
</center>
</body>
</html>
First Form:- [ post request ]
<html>
<head><title></title>
</head>
<body>
<form action="newproduct.php" method="post">
<input type="text" name="productscount"></input>
<input type="submit" name="insertdraft"></input>
</form>
</body>
</html>

How to prevent input fields from duplication?

When uploading any file, it's appearing all input fields as the same value even appearing the clear and change button. Also if click the clear button, it's cleared all fields.
How it works each field uniquely?
Demo: https://jsfiddle.net/sanjida96xq2/5gLqthrj/12/
View Snapshot
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$('.image-preview').popover('show');
},
function () {
$('.image-preview').popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
$('.image-preview').attr("data-content","").popover('hide');
$('.image-preview-filename').val("");
$('.image-preview-clear').hide();
$('.image-preview-input input:file').val("");
$(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$(".image-preview-input-title").text("Change");
$(".image-preview-clear").show();
$(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

I've fixed your JS fiddle example here -
https://jsfiddle.net/5gLqthrj/27/
So what had to be updated?
All your code showing the popover, updating the file, etc, used generic $('.image-preview') jQuery selector code. However, all 3 file uploaders used that class, so whenever you used that code, all THREE would get selected and updated. You need to be more specific and only select the one clicked, of course.
So how to do that?
There are different ways but here's a simple solution:
When an event (like click, or hover, both of which you are using) is bound in jQuery, you can reference $(this) (or $(event.currentTarget)) to figure out exactly WHICH element was clicked. Then, instead of updating all elements with that class, you only update this. You also have a few other selectors that needed updating with a similar not-specific-enough selector problem, so instead of doing a wholesale $('.selector-here') grab, I changed the code to only search for that selector WITHIN the relevant element using .find, e.g. $(this).find('.selector-here')
Hopefully this makes sense to you :)
$(document).on('click', '#close-preview', function(){
$('.image-preview').popover('hide');
$('.image-preview').hover(
function () {
$(this).popover('show');
},
function () {
$(this).popover('hide');
}
);
});
$(function() {
var closebtn = $('<button/>', {
type:"button",
text: 'x',
id: 'close-preview',
style: 'font-size: initial;',
});
closebtn.attr("class","close pull-right");
$('.image-preview').popover({
trigger:'manual',
html:true,
title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
content: "There's no image",
placement:'bottom'
});
$('.image-preview-clear').click(function(){
var $preview = $(this).closest('.image-preview');
$preview.attr("data-content","").popover('hide');
$preview.find('.image-preview-filename').val("");
$preview.find('.image-preview-clear').hide();
$preview.find('.image-preview-input input:file').val("");
$preview.find(".image-preview-input-title").text("Browse");
});
$(".image-preview-input input:file").change(function (){
var img = $('<img/>', {
id: 'dynamic',
width:250,
height:200
});
var file = this.files[0];
var reader = new FileReader();
var $preview = $(this).closest('.image-preview');
reader.onload = function (e) {
$preview.find(".image-preview-input-title").text("Change");
$preview.find(".image-preview-clear").show();
$preview.find(".image-preview-filename").val(file.name);
img.attr('src', e.target.result);
$preview.attr("data-content",$(img)[0].outerHTML).popover("show");
}
reader.readAsDataURL(file);
});
});
.container{
margin-top:20px;
}
.image-preview-input {
position: relative;
overflow: hidden;
margin: 0px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.image-preview-input input[type=file] {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.image-preview-input-title {
margin-left:2px;
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div><!-- /input-group image-preview [TO HERE]-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
<span class="input-group-btn">
<!-- image-preview-clear button -->
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
</div>
</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<!-- image-preview-filename input [CUT FROM HERE]-->
<div class="input-group image-preview">
<input type="text" class="form-control image-preview-filename" disabled="disabled">
<span class="input-group-btn">
<button type="button" class="btn btn-default image-preview-clear" style="display:none;">
<span class="glyphicon glyphicon-remove"></span> Clear
</button>
<!-- image-preview-input -->
<div class="btn btn-default image-preview-input">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="image-preview-input-title">Browse</span>
<input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> <!-- rename it -->
</div>
</span>
</div>
</div>
</div>
</div>

Fetch And Pass Value of Each Row In My Sidebar Using Javascript

How do I pass a value to my sidebar using Javascript when I fetch data from my database? Currently, I could pass data, but only the first row in my database table.
I just want to view details into my sidebar when I click the button to go somewhere before it does some action. But unfortunately, the first card only works then the second one does not.
The following code is available at: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_details.php
And the database is located here: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_query.sql
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flickity-->
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<!--Fontello-->
<link href="web/css/fontello.css" rel="stylesheet">
</head>
<body id="body">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'index.html'">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'category.php'">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'businesstype.html'">Business Types</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'instructions.html'">How To Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'contacts.html'">Contact Us</a>
</li>
</ul>
</div>
<ul class="navbar-side" id="navbarSide" style="padding: 20px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" align="right">
<a class="hamburger is-closed" data-toggle="offcanvas"><i class="icon_set_1_icon-77"></i></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_desc">
<form>
<img id="images1" src="" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<input type='text' id='field1'/>
<input type='text' id='field2'/>
<div id="field3"></div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Book Now
</p>
</form>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_review">
<form>
<img src="images/web/empty_img.gif" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleTextarea">Review</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Submit
</p>
</form>
<hr>
</div>
</div>
</ul>
<div class="overlay"></div>
</nav>
<div class="container marketing">
<h1>The Main page</h1>
<div class="row">
<?php
$conn = new mysqli('localhost', 'root', '1234', 'test');
if ($conn->connect_error) {
die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM items");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {?>
<div class="col-lg-3 col-sm-6 division-card">
<div class="card" style="position: relative;">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15c3874090b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15c3874090b%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22118.01666641235352%22%20y%3D%2297.5%22%3E318x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<h4 class="card-title no-margin" style="position: absolute; right: 0; bottom:0; top:150px;">TEST</h4>
<div class="card-block" align="left">
<h4 class="card-title no-margin">Card title</h4>
<p class="no-margin">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<input class="form-control" type='text' id='fielda' value="<?php echo $row['name'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldb' value="<?php echo $row['price'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldc' value="<?php echo $row['temdesc'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldd' value="<?php echo $row['imagename'] ; ?>"/> <br/>
<i class="fa fa-heart-o"></i>
<i class="icon_set_1_icon-93"></i>
<a href="#" class="btn btn-outline-primary" id="navbarSideButton" >Go Somewhere</a>
</div>
</div>
</div>
<?php } } else { } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#footer").load("footer.html");
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
$(document).ready(function() {
$('#navbarSideButton').on('click', function() {
$('#navbarSide').addClass('reveal');
$('.overlay').show();
document.body.style.overflow = 'hidden';
$('#field1').val($('#fielda').val());
$('#field2').val($('#fieldb').val());
$("#field3").html($("#fieldc").val());
var path = "images/web/";
var data = $("#fieldd").val();
var imgEl = document.getElementById("images1");
imgEl.src= path.concat(data);
});
$('.is-closed').on('click', function() {
$('#navbarSide').removeClass('reveal');
$('.overlay').hide();
document.body.style.overflow = 'scroll';
});
});
function switchVisible() {
if (document.getElementById('item_desc')) {
if (document.getElementById('item_desc').style.display == 'none') {
document.getElementById('item_desc').style.display = 'block';
document.getElementById('item_review').style.display = 'none';
} else {
document.getElementById('item_desc').style.display = 'none';
document.getElementById('item_review').style.display = 'block';
}
}
}
</script>
</body>
</html>
<style type="text/css">
.navbar-side {
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 0;
list-style: none;
border-left: 2px solid #ccc;
background-color: #f7f7f9;
overflow-y: scroll;
z-index: 1000;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.navbar-side-item {
padding: 1.5rem 0;
margin: 0;
border-bottom: 2px solid #ccc;
height: 5rem;
}
.side-link {
padding-left: 2rem;
}
.reveal {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.overlay {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #ccc;
opacity: 0.6;
z-index: 990;
}
.is-closed{
cursor: pointer;
}
#item_review{
display: none;
}
/*-------------------------------*/
/* Media Breakpoints Area */
/*-------------------------------*/
#media (min-width: 544px) {
.navbar-side {
width: 100%;
}
.container.marketing {
margin-top: 90px;
}
}
#media (min-width: 768px) {
.navbar-side {
width: 50%;
}
.container.marketing {
margin-top: 80px;
}
}
#media (min-width: 992px) {
.navbar-side {
width: 40%;
}
.container.marketing {
margin-top: 70px;
}
}
#media (min-width: 1200px) {
.navbar-side {
width: 25%;
}
.container.marketing {
margin-top: 60px;
}
}
</style>

Check this line:
$('#navbarSideButton')
here you are using # i.e. ID's selector which works for unique selection. So it works for the first selector only, this is the default behavior of # selector. Instead of that use . i.e. class selectors that works for multiple selection.

Button not working when sidenav is out

I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).
I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.
$('.button-collapse').sideNav({
menuWidth: 260,
edge: 'left',
closeOnClick: true
}
);
//Unbind sidenav click to close
$(function(){
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
html,body {
height: 100%;
background-color:
}
header, main, footer, header{
padding-left: 0 auto;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.text1 {
color: #212121;
}
.text2 {
color: #757575;
}
nav.top-nav {
background-color: #303F9F;
}
.title-text {
font-family: Roboto;
font-weight: bold;
}
a.bold, .bold {
font-family: Roboto;
font-weight: bold;
}
a.light, .light {
font-family: Roboto;
font-weight: normal;
}
#sidenav-overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav class="top-nav">
<div class="container">
<i class="material-icons">menu</i>
<div class="navbar-wrapper">
Icy Fire
</div>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li>Account</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
Index
</div>
</li>
</ul>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>
<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
</div>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>
</div>
<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
<h5 class="indigo-text"><?php getMsg(); ?></h5>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
Here it is on my website: link

You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.

it is because of your drag target is drag-target right is 0 which blocks your button which is position to right
remove the css attribute
right: 0;
in your drag-target element

How to make the pop to stay after clicking on Register or Login button in the Popup [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Here is this link I am working on. So, I can't able to create jsfiddle as it is the huge template.
The problem is in the top right section (Login).
I can click on the Login and the the pop-up window appears which shows "Login" and "Register".
But if I click on the "Register" tab, then the entire pop-up window disappears.
How can I fix it?
Here is the related html
<i class="dropdown profile-dropdown">
<a id="expandMenus" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">
<i class="fa fa-user"></i>
Login</span> <b class="caret"></b>
<i class="bag fa fa-star">0</i>
</a>
<ul class="dropdown-menu dropdown-menu-right" style="min-width: 300px">
<!-- Login starts-->
<div class="col-lg-12" style="background-color:#EFEFEF">
<div class="main-boxallau clearfixallau" style="background-color:#EFEFEF">
<div class="tabs-wrapper profile-tabs" style="background-color:#EFEFEF">
<ul class="nav nav-tabs" style="background-color:#EFEFEF">
<li class="active" style="background-color:#EFEFEF;width:47%;padding:-2px 10px 10px 24px;margin: 0px 0px 0px 5px;">
<a data-toggle="tab" id="showLoginArea" style="color:black;border: 2;
border-bottom: 2px solid #43882C;border-right: 1px solid #43882C;outline: 0;height: 36px;">
<b style="margin:0px 0px 0px 18px">LOGIN</b></a></li>
<li class="" style="background-color:#EFEFEF;width:40%">
<a data-toggle="tab" style="color:black;height:36px;" id="showRegisterArea"><b style="margin:0px 0px 0px 13px">REGISTER</b></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="loginArea">
<div id="login-box-innerallau" style="background-color:#EFEFEF;margin-top: -6%;">
<form role="form" action="http://cube.adbee.technology/index.html">
<div class="input-group">
<input class="form-control" type="text" placeholder="Email Id" style="border:none;background-color:#EFEFEF;
border-bottom:1px;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<br>
<div id="remember-me-wrapper">
<div class="row">
<div class="col-xs-6">
<div class="checkbox-nice">
<input type="checkbox" id="remember-me">
<label for="remember-me" style="font-size:11px;margin:0px 0px 0px -6px !important">
Keep me logged in
</label>
</div>
</div>
<a href="forgot-password.html" id="login-forget-link" class="col-xs-6" style="font-size:12px" ;margin:-2px="" 0px="" -20px="">
Forgot Password
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success col-xs-12">Login</button>
</div>
</div>
<br>
</form>
</div>
</div>
<div class="tab-pane fade active in" id="registerArea" style="display:none">
<div id="login-box-innerallau" style="background-color:#EFEFEF;margin-top: -6%;">
<form role="form" action="http://cube.adbee.technology/index.html">
<div class="input-group">
<input class="form-control" type="text" placeholder="Email Id" style="border:none;background-color:#EFEFEF;
border-bottom:1px;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div class="input-group">
<input type="password" class="form-control" placeholder="Password" style="background-color:#EFEFEF;width:135%;
border: 0;
border-bottom: 1px solid #D0C8C8
outline: 0;
">
</div>
<div id="remember-me-wrapper">
<div class="row">
<a href="forgot-password.html" id="login-forget-link" class="col-xs-6" style="font-size:12px" ;margin:-2px="" 0px="" -20px="">
Forgot Password
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-success col-xs-12">Login</button>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-6">
<button type="submit" class="btn btn-primary col-xs-12 btn-facebook">
<i class="fa fa-facebook"></i> facebook
</button>
</div>
<div class="col-xs-12 col-sm-6">
<button type="submit" class="btn btn-primary col-xs-12 btn-twitter">
<i class="fa fa-twitter"></i> Twitter
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Login ends -->
</ul>
</li>

Replace line 4: of custom.js
$(".dropdown").toggleClass("open");
with
$("#expandMenus").toggleClass("open");
You are toggling the whole menu on every click of the class .dropdown
Login and register have the class dropdown

Categories

Resources