Radio Button to change form inputs - javascript

I have two radio buttons each one will toggle different inputs on a form. I've achomplished this using the onclick() function that utilizes hide() but then this require another function with replicated .show() to bring the elements back if the user toggles back and forth. Thought there must be better logic something that is not so redundant, maybe an if toggle value?
Anyways this is what I have:
<labe>
<input type="radio" name="radioReason" onClick="resetPassShow()"> </input
<span class="text">Request profile update (i.e. phone#)</span>
</label>
<label>
<input type="radio" name="radioReason" value="resetPassword" onClick="resetPassRemove;"> </input>
<span class="text">Reset Password or Unlock My Account</span>
</label>
function resetPassRemove(){
$("#prodCategoryLabel").hide();
....
}
function resetPassShow(){
$("#prodCategoryLabel").show();
....
}

Here is the JS Fiddle in action: https://jsfiddle.net/dv5xmw9z/1/
JS
function hideA(x) {
if (x.checked) {
document.getElementById("A").style.visibility = "hidden";
document.getElementById("B").style.visibility = "visible";
}
}
function hideB(x) {
if (x.checked) {
document.getElementById("B").style.visibility = "hidden";
document.getElementById("A").style.visibility = "visible";
}
}
HTML
<input type="radio" onchange="hideB(this)" name="aorb" checked>A |
<input type="radio" onchange="hideA(this)" name="aorb">B
<div id="A">
<br/>A's text</div>
<div id="B" style="visibility:hidden">
<br/>B's text
</div>

use $( ".target" ).toggle(); function.
http://api.jquery.com/toggle/

Related

Javascript event to change its child to checked

I want an event in which when i click the list tag so the radio button gets checked.
<li class="morning-time">
<div class="morning-icon"></div>
<div class="timeTxt">Morning <span>7am - 12am</span></div>
<div class="checkBox">
<label>
<input type="radio" class="option-input checkbox" id="rbt_Time1" name="rbt_Time" value="1" data-text="Morning 7am - 12am">
<span></span>
</label>
</div>
<div class="clear"></div>
</li>
You will have to include jquery for using the following code:
$(function() {
$('.morning-time').on('click', function(){
$('.option-input', $(this)).prop("checked", true);
});
});
Here, on li(class='morning-time'), the radio(class='option-input') is searched inside(the li tag) and set checked.
You need setAttribute to do so AND to explain the code, radio styled input have a checked attribute. Just set it to true and the input get check.
Here the code :
function CheckMe()
{
var radioInput = document.getElementById("rbt_Time1");
radioInput.setAttribute("checked", "true");
}

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

Show / Hide contents base on radio button selection

I am trying to toggle a content DIV base on the selection of radio buttons.
HTML for radio button.
<div class="row-fluid">
<label class="radio">
<input type="radio" name="account" id="yes" value="yes" checked>
Yes, I have an existing account
</label>
<label class="radio">
<input type="radio" name="account" id="no" value="no">
No, I don't have an account
</label>
</div>
Content DIV
<div id="account_contents">
<p>This is account contents.......</p>
</div>
This is how I tried it in jquery.
$('#no').bind('change',function(){
$('#account_contents').fadeToggle(!$(this).is(':checked'));
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
});
But it doesn't work for me correctly. Here I want to show this content DIV only if user don't have an account.
Can anybody tell me how to fix this problem?
seems you need .on('change') for radio buttons not just for one of them
$('input[type="radio"][name="account"]').on('change',function(){
var ThisIt = $(this);
if(ThisIt.val() == "yes"){
// when user select yes
$('#account_contents').fadeOut();
}else{
// when user select no
$('#account_contents').fadeIn();
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
}
});
Working Example
$(document).ready(function(){
$('.radio input[type="radio"]').on("click", function(){
if($('.radio input[type="radio"]:checked').val() === "yes"){
$("#account_contents").slideDown("slow");
}else{
$("#account_contents").slideUp("slow");
}
});
});
I'm not sure if I got you right, but this fiddle toggles #account_contents depending on which button you click:
This was how i tweaked the script:
$('#no').bind('change',function(){
$('#account_contents').fadeToggle(!$(this).is(':checked'));
$('#account_contents').find("input").val("");
$('#account_contents').find('select option:first').prop('selected',true);
});
$("#yes").bind("change", function() {
$('#account_contents').fadeOut();
});

foreach radio button show more info

I am trying to make for each radio button, when it is clicked on to show the div with more infos about that clicked title, when another radio button is clicked then the to show info about that radio button and hide the other one that was clicked on:
HTML:
<input type="radio" id="1" />
<div class="event1">
content..
</div>
<input type="radio" id="2" />
<div class="event2">
content..
</div>
<input type="radio" id="3" />
<div class="event3">
content..
</div>
jQuery:
var i = 1;
while(i < 10) {
$('.event' + i).hide();
$("#" + i).click(function() {
$('.event' + i).show();
});
i++;
}
HTML
<input type="radio" name="radio" id="1" />
<div class="event">
content.. 1
</div>
<input type="radio" name="radio" id="2" />
<div class="event">
content.. 2
</div>
<input type="radio" name="radio" id="3" />
<div class="event">
content.. 3
</div>
JS
$('input[name=radio]').click(function() {
$('.event').hide();
$(this).next('.event').show();
});
CSS
.event {
display: none;
}
Fiddle
http://jsfiddle.net/UKn6D/
You can try changing your loop with "each"
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked'))
$(this).next().show();
else
$(this).next().hide();
});
});
});
It would be preferrable if you assign a class to radio elements to focus specifically on them. Something like "radioElements" should be enough. Or you can also use id with a starter: "radio_1","radio_2" and then use the input[id^='radio_'].
In all the case you can use "each" function.
More deeply, if you want that all other radio "info" cut off change it to:
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked')) {
$("input[type='radio']").next().hide();
$(this).next().show();
}
});
});
});
$('input[type="radio"]').on('change', function() {
var id = $(this).attr('id'); //Get the ID from the selected radio button
$('div:visible').hide(); //Hide visible Divs
$('div.event' + id).show(); //Show matched Div
});
You'll want to give the divs an additional class name and update the jQuery code here. You'll also want to make sure to assign a name attribute to the input elements so that they are all part of the same group -- assuming they are.
instead of having a while look like that why not simply have
<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>
This will then work with multiple and the jQuery can just be like this
$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});
I haven't actually tested the above but I believe it should work for you & the reason to have the container ID is just to speed your jQuery up as it is faster to attach via #elementID first

Hide on radio button

I have two radio buttons that are YES (value=1) and NO (value=0), I'm using the following code to show a hidden division when you click on YES:
$("#regaddress").change(function(){
if ($(this).val() == "1" ) {
$("#registeredaddress").slideDown("fast"); //Slide Down Effect
} else {
$("#registeredaddress").slideUp("fast"); //Slide Up Effect
}
});
Code for Radio Buttons:
<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No
What I need is the code to hide that division when you click NO. Should be a simple answer for some of you, but personally feel like banging my head against a wall this afternoon trying to work out how to hide it!
That's easy enough, because you posted no id or name attributes in your original question, I've abstracted it out to the following:
html
<form action="" method="post">
<fieldset>
<input type="radio" value="0" name="state" id="no" />
<label for="no">No</label>
<input type="radio" value="1" name="state" id="yes" />
<label for="yes">Yes</label>
</fieldset>
</form>
<div id="hidden">This div is hidden</div>
jQuery
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').show();
}
else {
$('#hidden').hide();
}
}
);
});
Demo of the above posted at JS Fiddle.
Amended slightly to take into account the slideUp() and slideDown() usage:
$(document).ready(
function(){
$('input:radio[name=state]').change(
function(){
if ($(this).val()==1) {
$('#hidden').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#hidden').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle.
Final edit to take into account your id and name attributes:
$(document).ready(
function(){
$('input:radio[name=regaddress]').change(
function(){
if ($(this).val()==1) {
$('#registeredaddress').slideDown(1000).text('This div is no longer hidden.');
}
else {
$('#registeredaddress').slideUp(1000).text('This div is now hidden.');
}
}
);
});
Demo at JS Fiddle
Also, if you're interested, I did something similar that you can use for pretty much any type of checkbox or form element. Dynamic Show Hide. It may be a little overboard for what you're doing but it's handy if you do this thing a lot since you can stick it in it's on js file and call it whenever you need it.

Categories