159
rated 0 times
[
163]
[
4]
/ answers: 1 / hits: 10067
/ 5 Years ago, thu, june 27, 2019, 12:00:00
I have an application with a form and 2 inputs (a dropdown list and a checkbox).
These two inputs are required to be able to click on the submit button (a javascript function do the job)
the button is currently red with some CSS, even if disabled and i would like it be grey when disabled and red otherwise.
the job seems simple, but i have a problem with javascript, it doesn't work.
I tried this:
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
but it doesn't work.
I also tried this:
var sbt_btn_att = document.querySelector('button#submit_button').getAttribute('disabled');
var sbt_btn = document.querySelector('button#submit_button');
function coloration_button(){
if(sbt_btn_att.disabled == true){
sbt_btn.style.background = 'grey';
}
else {
sbt_btn.style.background = 'red';
}
}
console don't inform about some error or other.
If someone can help me
Here is the code pen with all javascript and CSS used.
thanks in advance
/* => prerequisites: JQuery library 2.1.3 */
/* variable declaration */
var menu = document.querySelector('.nav__list');
var burger = document.querySelector('.burger');
var doc = $(document);
var l = $('.scrolly');
var panel = $('.panel');
var vh = $(window).height();
var openMenu = function() {
document.querySelector('.burger').classList.toggle('burger--active');
/*equivalent: burger.classList.toggle('burger--active');*/
document.querySelector('.nav__list').classList.toggle('nav__list--active');
/*equivalent: menu.classList.toggle('nav__list--active');*/
};
/* reveal content of first panel by default*/
panel.eq(0).find('.panel__content').addClass('panel__content--active');
var scrollFx = function() {
var ds = doc.scrollTop();
var of = vh / 4;
/* if the panel is in the viewport, reveal the content, if not, hide it.*/
for (var i = 0; i < panel.length; i++) {
if (panel.eq(i).offset().top < ds + of ) {
panel
.eq(i)
.find('.panel__content')
.addClass('panel__content--active');
} else {
panel
.eq(i)
.find('.panel__content')
.removeClass('panel__content--active')
}
}
};
var scrolly = function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 300, 'swing', function() {
window.location.hash = target;
});
}
var init = function() {
document.querySelector('.burger').addEventListener('click', openMenu, false);
/*equivalent: burger.addEventListener('click', openMenu, false);*/
window.addEventListener('scroll', scrollFx, false);
window.addEventListener('load', scrollFx, false);
$('a[href^=#]').on('click', scrolly);
};
doc.on('ready', init);
/* Loader Between Page
========================================================================== */
/*simple function to retrieve element by its id */
function getId(id) {
return document.getElementById(id);
}
/* id1 the button id
id2 the loader id */
function validation(id1, id2) {
getId(id1).style.display = none;
getId(id2).style.display = ;
return true;
}
/* Form of the unlock screen
========================================================================== */
/* Hide/show the unlock mode
========================================================================== */
/*Declare the current screen as a and the unlock screen as b.*/
var a = document.querySelector(#current);
var b = document.querySelector(#debug_mode);
/* declare the button in the navigation pan as btn */
var btn = document.querySelector(#debug_mode_btn);
/* add an event on this button. On click on it: */
btn.addEventListener(click, function myfunction() {
sty = document.querySelector(#debug_mode_btn);
/* if the unlock mode is hide, then:
- reveal it,
- switch colors of the button
- hide the current screen */
if (b.style.display == 'none') {
sty.style.background = 'red';
sty.style.color = #2b3033;
b.style.display = 'block';
a.style.display = 'none';
}
/* else if unlock mode is already visible, hide it, reveal the current screen, and reswitch the color of the button*/
else {
sty.style.background = '#2b3033';
sty.style.color = 'red';
b.style.display = 'none';
a.style.display = 'block';
}
});
/* Hide/show the corresponding form based on the value of the select drop down list in the unlock mode.
========================================================================== */
var previous_debug_form;
var c = document.querySelector(#debug_selector);
c.addEventListener(change, function myfunction_display() {
var debug_form = document.querySelector('#debug_selector');
if (previous_debug_form) {
previous_debug_form.style.display = none;
}
var debug_id = debug_form.value;
if (debug_id) {
var debug_form = document.querySelector('#' + debug_id);
debug_form.style.display = block;
previous_debug_form = debug_form;
}
});
/* Form in the current page
========================================================================== */
/* Function to allow only one checkbox to be checked */
function selectOnlyThis(id) {
for (var i = 1; i <= 4; i++) {
if (Check + i === id && document.getElementById(Check + i).checked === true) {
document.getElementById(Check + i).checked = true;
} else {
document.getElementById(Check + i).checked = false;
}
}
}
/* Function to remove the disabled property of the submit button */
function callFunction() {
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
document.querySelectorAll('button[type=submit]')[0].disabled = true;
/*equivalent for input submit button: document.querySelectorAll('input[type=submit]')[0].disabled = true; */
if (checkedOne) {
document.querySelectorAll('button[type=submit]')[0].disabled = false;
document.querySelector('#submit_button').style.background = 'rgba(230,0,39,1.1);';
/*equivalent for input submit button: document.querySelectorAll('input[type=submit]')[0].disabled = false; */
}
}
var sbt_btn = document.querySelector('button#submit_button').getAttribute('disabled');
function coloration_buton() {
if (sbt_btn == true) {
} else if (sbt_btn == false) {
}
}ul {
color: black;
list-style-type: none;
}
.item {
display: flex;
flex-direction: column;
align-items: left;
align-content: space-around;
}
#bu_prompt {
width: auto;
}
label {
color: black;
}
.prompt {
width: 45%;
}
html {
min-height: 100%;
font-family: sans-serif;
}
.bg {
width: 100%;
height: 100%;
background: white;
background-repeat: no-repeat;
}
.logo {
text-align: center;
margin-top: 40px;
margin-bottom: 30px;
}
.img-svg {
width: 350px;
}
/* Form
========================================================================== */
.form {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin-right: auto;
margin-left: auto;
margin-bottom: 1em auto;
margin-top: 1em;
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 700px;
/* area width */
width: 90%;
}
h2 {
font-weight: normal;
}
/* Button
========================================================================== */
.btn-submit {
background-color: ;
border-radius: 5px;
border: 1px solid white;
color: #fff;
max-width: 100%;
font-family: 'AvenirNextRegular', Helvetica, Arial, sans-serif;
background: rgba(230, 0, 39, 1.1);
touch-action: manipulation;
}
[class*='btn-'] {
border-bottom: 2px solid rgba(0, 0, 0, .15);
border-top: 1px solid rgba(255, 255, 255, 1);
border-radius: 5px;
color: #fff;
display: inline-block;
font: -webkit-small-control;
font-size: .8em;
line-height: 140%;
margin-top: .5em;
padding: 10px 20px;
width: 100%;
text-transform: uppercase;
text-align: center;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.next_page {
padding-right: 5%;
font-style: normal;
}
/*
========================================================================== */
.header_frame {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
margin: 10px auto;
margin-top: -20px;
padding: .5em 2em .5em 2em;
margin-bottom: 30px;
width: 100%;
max-width: 700px;
color: black;
text-align: left;
}
/* Navigation Pan
========================================================================== */
.nav-pan {
background-color: #F7F7F7;
border: 1px solid white;
border-radius: 5px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
padding-top: 1.5em;
padding-left: 1.5em;
padding-right: 1.5em;
padding-bottom: .5em;
max-width: 200px;
height: auto;
width: 90%;
position: fixed;
bottom: 0px;
bottom: 0px;
left: 0px;
}
/* Navigation
========================================================================== */
.nav__list_ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100px;
backface-visibility: hidden;
}
.nav__list {
display: flex;
flex-flow: column wrap;
height: 85vh;
transform: translate(0, -100%);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
list-style-type: none;
padding: 0;
margin: 0;
}
.nav__list--active {
transform: translate(0, 0);
}
.nav__item {
flex: 1;
position: relative;
}
.nav__link {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
font-size: 24px;
background: #2b3033;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: red;
/* Icons color */
;
}
.nav__link:hover {
background: #272b2e;
}
@media (max-width: 640px) {
.nav {
width: 70px;
}
.nav__list {
height: 90vh;
}
}
.nav_btn {
background: #2b3033;
color: red;
border: 0px;
}
/* Burger (Small square in the left up angle with three horizontal bar)
========================================================================== */
.burger {
height: 15vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
background: #2b3033;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger:hover {
background: #272b2e;
}
.burger__patty {
position: relative;
height: 2px;
width: 40px;
background: white;
}
.burger__patty:before {
content: ;
position: absolute;
top: -10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty:after {
content: ;
position: absolute;
top: 10px;
left: 0;
height: 2px;
width: 100%;
background: white;
}
.burger__patty,
.burger__patty:before,
.burger__patty:after {
will-change: transform;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.burger--active .burger__patty {
transform: rotate(90deg);
}
.burger--active .burger__patty:before {
transform: rotate(-45deg) translate(-7px, -7px) scaleX(0.7);
}
.burger--active .burger__patty:after {
transform: rotate(45deg) translate(-7px, 7px) scaleX(0.7);
}
@media (max-width: 640px) {
.burger {
height: 10vh;
}
.burger__patty {
transform: scale(0.8);
}
.burger--active .burger__patty {
transform: scale(0.8) rotate(90deg);
}
}
/* Loader between page (red animated wheel)
========================================================================== */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid red;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
right: 50%%;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* button#submit_button {
background: rgba(205,204,204,1);
} */<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<html lang=eng>
<head>
<meta charset=utf-8>
<meta name=author content=>
<meta name=description content=Welcome Page>
<title>Welcome Page</title>
<!-- Library Javascirpt and CSS -->
<!-- specific CSS for debug mode -->
<style type=text/css>
#debug_all,
#debug_specific {
margin: .5em;
padding-bottom: .5em;
}
#debug_selector,
#debug_bu_selector {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
</head>
<body class=bg>
<!-- div of the loader -->
<div id=wait_tip style=display:none class=loader></div>
<!-- Brand Logo -->
<div class=logo></div>
<div id=current style=display:block>
<div class=formbox>
<div class=form>
<div class=item>
<h2 style=font-weight:normal>Welcome into the Application</h2>
</div>
<br>
<form title=Available business unit id=wlc_form name=welcome_form action= onsubmit=return validation('submit_button','wait_tip');>
<div class=item>
<table>
<tbody>
<tr>
<td>
Choose a Business unit in the list:
</td>
<td>
<select name=bu_prompt id=bu_prompt required=>
<option value= disabled= selected=> -- Choose a business unit -- </option>
<option value=1>HONG KONG</option>
<option value=D01>BELGIUM</option>
<option value=D02>TAIWAN</option>
<option value=D08>D08</option>
<option value=D09>SINGAPORE</option>
<option value=D10>FRANCE</option>
<option value=GBR>GREAT BRITAIN</option>
<option value=SGP>SINGAPORE</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<hr>
<br>
<div class=item>
<label>What do you want to do on this selected ?</label>
<ul name=checkingbox>
<li><input type=checkbox id=Check1 name=_program value= onclick=selectOnlyThis(this.id) onchange=callFunction()> Manage </li>
<li><input type=checkbox id=Check2 name=_program value= onclick=selectOnlyThis(this.id) onchange=callFunction()> Sending Report</li>
<li><input type=checkbox id=Check3 name=_program value= onclick=selectOnlyThis(this.id) onchange=callFunction()> other</li>
</ul>
</div>
<!-- end item div -->
<br>
<input id=log type=checkbox name=_debug value=log>
<label for=log style=font-size:0.7em> </label>
<button class=btn-submit id=submit_button disable=true type=submit disabled= form=wlc_form>
<i class=next_page> Next Page </i>
<i class=fa fa-arrow-right></i>
</button>
</form>
<!-- end div form -->
</div>
<!-- end div formbox -->
</div>
<!-- end current div -->
</div>
<!-- Navigation Pan -->
<nav class=nav>
<div class=burger>
<div class=burger__patty></div>
</div>
<ul class=nav__list nav__list_ul>
<li class=nav__item>
<button class=nav__link id=debug_mode_btn title=Unlock business unit><i class=fa fa-cogs></i></button>
</li>
</ul>
</nav>
<div id=debug_mode style=display:none class=form>
<div>
<h2> </h2>
</div>
<select id=debug_selector>
<option disabled= selected=> -- Choose an action -- </option>
<option value=debug_specific> Unlock </option>
<option value=debug_all> Unlock All </option>
</select>
<div id=debug_specific style=display:none>
<form action= method=GET onsubmit=return validation('wlc_unlock','wait_tip');>
<input type=hidden name=_debug_bu value=1>
<input type=hidden name= value=>
<label> Choose a locked business unit: </label>
<select name=bu_name id=debug_bu_selector>
</select>
<button class=btn-submit id=wlc_unlock type=submit>
<i class=next_page> Unlock </i>
<i class=fa fa-unlock-alt></i>
</button>
</form>
</div>
<!-- Unlock all Bu -->
<div id=debug_all style=display:none>
<form action= method=GET onsubmit=return validation('wlc_all_unlock','wait_tip');>
<input type=hidden name=_debug_all_bu value=1>
<input type=hidden name= value=>
<button class=btn-submit id=wlc_all_unlock type=submit>
<i class=next_page> Unlock All </i>
<i class=fa fa-unlock-alt></i>
</button>
</form>
</div>
<!-- end of unlocking mode -->
</div>
<!-- specific JS for debug mode, load at the end for avoid problem -->
</body>
</html>
More From » html
