i am trying to show a div when all inputs are filled , but unfortunately it shows nothing here is my JS , it works on the JS FIDDLE but not on the website
$('#name, #prenom, #password,#confirm_password, #email,#confirm_email').bind('keyup', function() {
if(allFilled()) $('.next2').show();
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
You can turn the jQuery collection into an an array and then use the native JS array method every to check to see if all the inputs contain values.
const inputs = $('input');
inputs.on('keyup', function() {
const notEmpty = inputs.toArray().every(input => {
return input.value !== '';
});
if (notEmpty) {
$('div').show();
} else {
$('div').hide();
}
});div { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input />
<input />
<input />
<input />
<div>All the values!</div>