We Keep Coding

Trying to disable button if text hasn’t being input and one of three check box hasn’t been checked in JavaScript

I am trying to disable a button that requires both an input of text being typed and one of three checkboxes being checked. The text is a user name and the checkbox is a difficulty of either easy, medium, or hard. Currently, my function only works if one of the requirements is met. So if the text has been inputted the button is enabled and the same with the checkboxes.
startButton.addEventListener('click', startQuiz);
function disableButton() {
if (document.getElementById("username").value === "") {
document.getElementById("start-btn").disabled = true;
}
if (document.getElementsByName("difficulty").checked) {
document.getElementById("start-btn").disabled = true;
}
else {
document.getElementById("start-btn").disabled = false;
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" onkeyup="disableButton()" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" onclick="disableButton()">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" onclick="disableButton()">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" onclick="disableButton()">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>

every time the value changed, check both input
let diffChecked = false;
let startButton = document.querySelector('#start-btn');
let username = document.querySelector('#username');
let difficulty = document.querySelectorAll('[name="difficulty"]');
username.addEventListener('input', function() {
validateInput();
})
difficulty.forEach(function(item) {
item.addEventListener('click', function() {
diffChecked = true;
validateInput();
})
})
function validateInput() {
if (username.value && diffChecked) {
startButton.disabled = false;
} else {
startButton.disabled = true
}
}
<div>
<label for="username">Enter your Username</label>
<input type="text" name="username" id="username" placeholder="Enter Username">
</div>
<div id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff">
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff">
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff">
<label for="hard-diff">Hard</label>
</div>
</div>
<button id="start-btn" type="submit" class="btn" disabled>Start</button>

Instead of a div you must use the Semantic HTML form, that will do the job for you without even writing javascript code.
<form id="difficulty" class="center">
<div>
<input type="radio" name="difficulty" id="easy-diff" required>
<label for="easy-diff">Easy</label>
</div>
<div>
<input type="radio" name="difficulty" id="medium-diff" required>
<label for="medium-diff">Medium</label>
</div>
<div>
<input type="radio" name="difficulty" id="hard-diff" required>
<label for="hard-diff">Hard</label>
</div>
<button type="submit">Enviar</button>
</form>
Inside a form tag, the submit button only works with all required inputs does not have an undefined value.
And you may call your function startQuiz as an action, if you want.
The action attribute specifies where to send the form-data when a form is submitted.
<form id="difficulty" class="center" action="startQuiz()">

Radio button Show/Hide on parent element on page load

In the below code, show/hide is not happening on page reload. If I check another radio button after page reloading, it's working. Help me to resolve the same.
$(window).load(function(){
$("[name=image_type]").on("change",imageTypeToggle);
})
function imageTypeToggle(){
let selectedValue, $showElements, $hideElements;
selectedValue = $(this).val();
$hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec");
$hideElements.hide().find("input").attr('disabled',true);
if(selectedValue == "0") {
$showElements = $(this).parents(".image_video_sec").find(".image_sec");
} else if(selectedValue == "1") {
$showElements = $(this).parents(".image_video_sec").find(".video_sec");
}
$showElements.show().find("input").attr('disabled',false);
};
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>

One way to do it is to trigger a click on the radio button when the document loads. (I changed your $(window).load (which was throwing an error) to $(document).ready.
$("[name=image_type]").eq(0).trigger('click')
$(document).ready(function() {
$("[name=image_type]").on("change", imageTypeToggle);
$(".image_video_sec").each(function() {
$(this).find("[name=image_type]").eq(0).trigger('click')
})
})
function imageTypeToggle() {
let selectedValue, $showElements, $hideElements;
selectedValue = $(this).val();
$hideElements = $(this).parents(".image_video_sec").find(".image_sec, .video_sec");
$hideElements.hide().find("input").attr('disabled', true);
if (selectedValue == "0") {
$showElements = $(this).parents(".image_video_sec").find(".image_sec");
} else if (selectedValue == "1") {
$showElements = $(this).parents(".image_video_sec").find(".video_sec");
}
$showElements.show().find("input").attr('disabled', false);
};
.image_sec,
.video_sec {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>
<div class="image_video_sec">
<label class="on">
<input type="radio" name="image_type" value="0" checked>R1
</label>
<label>
<input type="radio" name="image_type" value="1">R1
</label>
<dl class="image_sec">Image</dl>
<dl class="video_sec">Video</dl>
</div>

Show and Hide contents base on radio button selection in jQuery

I am trying to display different contents base on radio button select in jquery.
My HTML is something like this:
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?>> Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>> Institute
</label>
</div>
This is how I tried in jquery to display two different contents for each radio button selection.
$('input[type="radio"][name="b_type"]').on('change',function(){
var sel = $(this);
if(sel.val() == 1){
$('#person-block').show();
$('#person-institute').show();
}else{
$('#institute-block').show();
$('#person-block').hide();
});
This code is working in some way. But there is a problem. Default radio button checked is dynamic. Lets assume second button is checked when the page is loading, then it display #persion-block contents. But I want to display #institute-block contents.
If I click on first button and then click on second its working.
Can anybody tell me how to figure this out?
Thank you.

Just trigger the change event in the element inside the document.ready
Note : You have some id typo .
$('input[type="radio"][name="b_type"]').on('change',function(){
alert($(this).val());
if($(this).val() == "1"){
$('#person-block').show();
$('#institute-block').hide();
}else{
$('#institute-block').show();
$('#person-block').hide();
}
});
$(document).ready(function(){
$('input[type="radio"][name="b_type"]:checked').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div id="person-block" >
Person
</div>
<div id="institute-block" >
Institute
</div>

You can check which button is checked on page load with the :checked pseudo class (additionally to your existing event handler):
if ($('input[type="radio"][name="b_type"]:checked').val() == 1) {
$('#person-block').show();
} else {
$('#institute-block').show();
}
.block {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div id="person-block" class="block">
Person
</div>
<div id="institute-block" class="block">
Institute
</div>
Additionally I would recommend hiding both elements on default to avoid showing the content of both before the JS has been loaded.

$(document).ready(function () {
$('input[type="radio"][name="b_type"]').on('change', function () {
var sel = $(this).filter(':checked').val();
if (sel == 1) {
$('#person-block').show();
$('#institute-block').hide();
} else {
$('#institute-block').show();
$('#person-block').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" > Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" checked> Institute
</label>
</div>
<div style="display:none" id="person-block" class="block">
Person
</div>
<div style="display:none" id="institute-block" class="block">
Institute
</div>

use .is(':checked')
if($('#myradiobutton').is(':checked')){
// this
}else{
// that
}

$("#redio1").click(function(){
$('#person-block').css('display','block');
$('#person-institute').css('display','block');
})
$("#redio2").click(function(){
$('#institute-block').css('display','block');
$('#person-block').css('display','none');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" id="redio1" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?>> Person
</label>
<label class="radio-inline">
<input type="radio" id="redio2" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>> Institute
</label>
</div>
<div id="person-block" style="color:red;display:none;">person-block</div>
<div id="person-institute" style="color:black;display:none;">person-institute</div>

$(document).ready(function () {
$('input[type="radio"][name="b_type"]').on('change', function () {
var sel = $(this).filter(':checked').val();
if (sel == 1) {
$('#person-block').show();
$('#institute-block').hide();
} else {
$('#institute-block').show();
$('#person-block').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
<label class="radio-inline">
<input type="radio" name="b_type" value="1" <?=(isset($type) && $type == 'Person') ? ' checked' : ''?> Person
</label>
<label class="radio-inline">
<input type="radio" name="b_type" value="2" <?=(isset($type) && $type == 'Institute') ? ' checked' : ''?>Institute
</label>
</div>
<div style="display:none" id="person-block" class="block">
Person
</div>
<div style="display:none" id="institute-block" class="block">
Institute
</div>

Filter all visible lists with inputs in form jquery

I am developing form.
What I need is when a user tries to go to another page with empty VISIBLE fields/checkboxes/radios these fields/checkboxes/radios should become red.
Filters for checkboxes: min 1, max 5.
My jQuery
const max = 5;
const min = 1;
const minCheckedCheckboxes = 1;
$('input.checkbox').on('click', function(evt) {
const checkboxes = $(this).closest('.cd-form-list-inner').find('input:checked');
if(checkboxes.length > max) {
alert('You can select only 5 checkboxes');
return false;
}
});
$('.next').click(function() {
let error = false;
$(['input[required]:visible', 'textarea[required]:visible']).each(function(index, selector) {
$(selector).each(function(index, input) {
error = error == true ? error : $(input).val() == '';
});
});
$('.parent:visible').each(function(index, group){
if(error == true) {
error = error;
}
else {
error = $('input:checked', group).length < minCheckedCheckboxes;
}
});
if(error == false) {
error =! $('input[type=radio]:required').is(':checked');
}
if(error) {
$('input[required]:visible, textarea[required]:visible').removeClass("error");
$('input[required]:visible, textarea[required]:visible').filter(function() {
return !this.value;
}).addClass('error');
return alert('Not all required fields are filled');
}
alert('All required fields are filled');
});
Here is jsFiddle

Check if below code works for you!
Looped on all desired inputs.
Checked the input type while looping, accordingly created the condition to add the error class, also maintained the elem on which error class needs to be added.
Then if condition is true then added error class to elem.
const max = 5;
const min = 1;
$('.next').click(function() {
$('input[required]:visible,textarea[required]:visible,input[type="checkbox"]:visible').each(function(index, selector) {
var elem;
if ($(this).is(":checkbox") || $(this).is(":radio")) {
var pDiv = $(this).parents("div").first();
var condition = false;
elem = pDiv;
if ($(this).is(":radio")) {
condition = pDiv.find("[type='radio']:checked").length <= 0
} else {
condition = pDiv.find("[type='checkbox']:checked").length < min || pDiv.find("[type='checkbox']:checked").length > max;
}
} else {
condition = !$(this).val();
elem = $(this);
}
if (condition) {
elem.addClass('error');
} else {
elem.removeClass('error');
}
});
});
.error {
background-color: pink;
border-color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<p>press button</p>
<input type="text" required/>
<input type="text" required style="display: none" />
<div>
<textarea cols="5" required placeholder="textarea"></textarea>
</div>
<div>
<textarea cols="5" required placeholder="textarea" style="display:none"></textarea>
</div>
<div class="parent">
<p>this div should be red</p>
<div>
<input type="radio" required>
</div>
</div>
<div class="parent" display: none>
<p>this div shouldn't be red</p>
<div>
<input type="radio" checked required>
</div>
</div>
<div style="display:none">
<p>this div shouldn't be red</p>
<input type="radio" required>
</div>
<div class="parent">
<p>this div shouldn't be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox" checked>
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div class="parent" style="display: none;">
<p>this div shouldn't be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div class="parent">
<p>this div should be red</p>
<div class="cd-form-list-inner checkboxes">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
<input type="checkbox" class="checkbox">
</div>
</div>
<div>
<button class="next">Next page</button>
</div>

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.

You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});

$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})

Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>

Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>