I'm writing a js script for multistep form's next/submit button visibility.
In the js script, first I'm looking for input fields within querySelectorAll and storing them in a variable called conditionalInput. After that, I'm again looking for <select> fields by querySelectorAll and pushing them one by one into conditionalInput so that later on I can check their values by forEach().
Now it tells me .push is not a function.
(() => {
'use strict'
window.addEventListener('load', () => {
var conditionalInput = document.querySelectorAll('.cs_sub_target_dep > input');
if (document.querySelectorAll('.cs_sub_target_dep > select')) {
var a = document.querySelectorAll('.cs_sub_target_dep > select');
a.forEach( (v, k) => {
conditionalInput.push(v);
});
}
// Getting the submit button.
var button = document.querySelector('button.frm_button_submit[type="submit"]');
conditionalInput.forEach( (v,k) => {
if ( v.type == "text" || v.type == "email" || v.type == "number" ) {
v.addEventListener('keydown', (e) => {
if ( v.value ) {
// Displaying the button.
button.style.visibility = "visible";
} else {
// Hiding the submit button.
button.style.visibility = "hidden";
}
});
} else if ( v.type == "checkbox" || v.type == "radio" ) {
v.addEventListener('change', () => {
if ( v.checked ) {
// Displaying the button.
button.style.visibility = "visible";
} else {
// Hiding the submit button.
button.style.visibility = "hidden";
}
});
} else if ( v.type == "select" ) {
v.addEventListener('change', () => {
if ( v.value ) {
// Displaying the button.
button.style.visibility = "visible";
} else {
// Hiding the submit button.
button.style.visibility = "hidden";
}
});
}
} );
});
})();
:root {
--white-color: #fff;
--color-black: #2a2a2a;
}
input {
padding: 9px 15px;
color: var( --color-black);
border: 1px solid var( --color-black );
}
button.frm_button_submit[type="submit"] {
visibility: hidden;
color: var( --white-color );
padding: 9px 35px;
font-weight: 500;
font-size: 16px;
background-color: var( --color-black);
}
<form action="">
<div class="cs_sub_target_dep">
<input class="input_field" type="text" placeholder="Full name">
</div>
<div class="cs_sub_target_dep">
<input class="input_field" type="email" placeholder="Email">
</div>
<div class="cs_sub_target_dep">
<input class="input_field" type="checkbox" name="CHECK_BOX" value="Check box" id="">
</div>
<div class="cs_sub_target_dep"
<input class="input_field" type="radio" name="RADIO_BUTTON" value="Male" id="">
<input class="input_field" type="radio" name="RADIO_BUTTON" value="Female" id="">
</div>
<div class="cs_sub_target_dep">
<select name="OPTIONS" id="">
<option value="hello">Hello</option>
<option value="hi">hi</option>
</select>
</div>
<div class="cs_sub_target_dep">
<select name="OPTIONS" id="">
<option value="hello">Hello</option>
<option value="hi" selected>hi</option>
</select>
</div>
<div class="frm_submit">
<button class ="frm_button_submit submit" type="submit">Submit</button>
</div>
</form>
Aucun commentaire:
Enregistrer un commentaire