We Keep Coding

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>

Troubles while trying to use getElementsByClassName to fill value in radio buttons

please.
Have a container on my page filled with links ("link_storage"), where my popup gets links for "value" ("code part bellow"). As you can see it's tied to the IDs, but now I need somehow to switch to class names (for example from old_id_1 to link1_cont).
I was trying to switch to .getElementsByClassName() but didn't succeed.
function onLinkClickCallBack(event) {
let disableClassName = 'disabled';
let linkElement = document.getElementById(event.target.id);
// Don't continue if button is disabled
if (linkElement.classList.contains(disableClassName)) {
return false;
}
}
let inputs = document.getElementsByName('productId');
for (i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
let value = inputs[i].value;
document.location.href = document.getElementById(value).href;
}
}
<div class="link_storage">
<span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span>
<span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span>
<span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span>
</div>
<fieldset>
<label>
<input type="radio" name="productId" id="radio4" value="zone_link_1" checked>
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio5" value="zone_link_2">
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio6" value="zone_link_3">
<h3>text<br><small>text</small></h3>
</label>
</fieldset>

Remove zone_ and add _cont to the value, and use that as the class name of the element in link_storage.
function onLinkClickCallBack(event) {
let disableClassName = 'disabled';
let linkElement = document.getElementById(event.target.id);
// Don't continue if button is disabled
if (linkElement.classList.contains(disableClassName)) {
return false;
}
}
let selectedInput = document.querySelector(".productId:checked");
if (selectedInput) {
let linkClass = selectedInput.value.replace("zone_") + "_cont";
document.location.href = document.querySelector(`.${linkClass}`).href;
<div class="link_storage">
<span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span>
<span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span>
<span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span>
</div>
<fieldset>
<label>
<input type="radio" name="productId" id="radio4" value="zone_link_1" checked>
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio5" value="zone_link_2">
<h3>text<br><small>text</small></h3>
</label>
<label>
<input type="radio" name="productId" id="radio6" value="zone_link_3">
<h3>text<br><small>text</small></h3>
</label>
</fieldset>

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>

How can I make this javascript form validation DRYer?

The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!

When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>​
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});

function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}

$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle

HTML form actions

For input style "text", I have a javascript function such as:
document.getElementById("dds1").onkeyup = function() {
updateIt();
};
Now, what if I had a checkbox? What would the code look like? What about for radio buttons? What would I use to get values (for the checkbox, either checked or not checked. and for the radio buttons, I'd like to get which button is clicked).
Here is code for the radio button:
<li id="foli517" class=" ">
<label class="desc" id="shippingChoice" for="Field517_0">
Shipping Options
</label>
<div>
<input id="shippingChoice" name="Field517" type="hidden" value="" />
<span>
<input id="shipping1" name="Field517" type="radio" class="field radio" value="$2.00 Shipping Fee" tabindex="13" checked="checked" />
<label class="choice" for="Field517_0" >
$2.00 Shipping Fee</label>
</span>
<span>
<input id="Field517_1" name="Field517" type="radio" class="field radio" value="I will pick up the items (free shipping)" tabindex="14" />
<label class="choice" for="Field517_1" >
I will pick up the items (free shipping)</label>
</span>
</div>
</li>

For the checkbox:
document.getElementById("checkBox").onclick = function() {
var isChecked = this.checked;
//whatever
};
For the radio button:
document.getElementById("radioButton").onclick = function() {
var clickedId = this.id;
//whatever
};