Triggering event on radio button click - javascript

I have a few radio buttons, one of which is the 'other' button. If a user clicks 'other' I want to show a text box asking for more info. This is my HTML and JS:
<div class="radio">
<label><input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Worked together </label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Studied together</label>
</div>
<div class="radio">
<label><input type="radio" name="other-radio" id="connection-invite-other-radio"> Other </label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control" >
</div>
JS:
$(document).ready(function(){
if($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
This however isn't working. Please help me understand if I'm doing something wrong. Thanks!

The radio needs to have the same name, in your case optradio.
You need to use a change event listener on all radio elements.
$(document).ready(function() {
$('input[type=radio]').change(function() {
if ($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
} else {
$('#connection-invite-other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Worked together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Studied together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio" id="connection-invite-other-radio">Other</label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control">
</div>

You need to call change event of radio button to show hide div.
$(document).ready(function(){
$('#connection-invite-other-radio').change(function(){
if($(this).is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
});

Related

Jquery does not catch unchecking of radio-button

I am builing a multi-step form.
Here is part of it:
<div class="form-group">
<div class="form-check">
<input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
<label for="1-1">Radio button 1-1</label>
</div>
<div class="form-check">
<input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
<label for="1-2">Radio button 1-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-1" id="textarea-1" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="2-1" class="form-check-input" type="radio" name="secondRadioGroup">
<label for="2-1">Radio button 2-1</label>
</div>
<div class="form-check">
<input id="2-2" class="form-check-input" type="radio" name="secondRadioGroup" data-show="#textarea-2">
<label for="2-2">Radio button 2-2</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-2" id="textarea-2" cols="30" rows="10" style="display: none"></textarea>
</div>
<div class="form-group">
<div class="form-check">
<input id="checkbox-1" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-1">Checkbox 1</label>
</div>
<div class="form-check">
<input id="checkbox-2" class="form-check-input" type="checkbox" name="secondRadioGroup">
<label for="checkbox-2">Checkbox 2</label>
</div>
<div class="form-check">
<input id="checkbox-other" class="form-check-input" type="checkbox" name="secondRadioGroup" data-show="#textarea-3">
<label for="checkbox-other">Other</label>
</div>
</div>
<div class="form-group">
<textarea name="textarea-3" id="textarea-3" cols="30" rows="10" style="display: none"></textarea>
</div>
And here is my JS :
$("[data-show]").change(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
What's the problem:
With checkbox it works fine. Showing and hiding on checking/unchecking the checkbox.
With radio buttons it works fine on the show, but it's not hiding on changing from current group of radio buttons.
Here is JSFiddle
EDIT 1:
What I need with radio button groups:
If I check radio-button with
name="radio_group_1" data-show="#id-of-textarea"
a textarea with
id="id-of-textarea"
shows up. If after this I check another radio-button from the same group
name="radio_group_1" NO DATA-ATTRIBUTE HERE
the textarea hides.
The jQuery logic is wrong. Working: https://jsfiddle.net/vutpcu0g/5
You should check the change event on all radios, not just the data-show ones. Then, select the nearest sibling radio to toggle the data-show element.
$("[type=radio],[type=checkbox]").change(function(){
if($(this).is(":checked") && $(this).data("show")) {
$($(this).data('show')).show();
} else {
var sib= $(this).parents('.form-group').find('[data-show]');
$(sib.data("show")).hide();
}
});
You have some errors in your code.Use this script.
$("[type='radio']").change(function(){
$("[type='radio']").each(function(){
if($(this).is(":checked")) {
$($(this).data('show')).show();
} else {
$($(this).data('show')).hide();
}
});
});
Fiddle: https://codepen.io/smitraval27/pen/XEpGNR
In your code you have not given [data-show] to every radio button. Plus on change of radio you have to use each to find out the changes of each and every radio.

Get value from radio button

I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>
Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!
You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing

Default checked button

Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=tru‌​e;
Thank you Pandiyan Cool

Change alphabet when select radio button

When I click one of the alphabet, the selected one shall be displayed and the rest should be hidden.
Somehow, the code doesn't work. I'm using jQuery.
$("#r-learn-more").click(function() {
alert("Handler for .click() called.");
});
$("#r-book-viewing").click(function() {
$("#bb").attr("display", "block");
});
$("#r-closing-price").click(function() {
alert("Handler for .click() called.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" style="display: block;">a</div>
<div id="bb" style="display: none;">b</div>
<div style="display: none;">c</div>
In general you tried with $("#bb").attr('display','block'), must be $("#bb").css("display","block");
Maybe the better way is to use something like:
<div class="fieldset-content">
<div class="radio">
<input type="radio" data-show="aa" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" data-show="bb" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" data-show="cc" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class='item' style="display: block;">a</div>
<div id="bb" class='item' style="display: none;">b</div>
<div id="cc" class='item' style="display: none;">c</div>
And JS
var $items = $('.item');
$(':radio').on('change', function () {
var $item = $('#' + this.dataset.show);
$items.not($item).css('display', 'none');
$item.css('display', 'block');
});
Try this
$('.radio input').change(function(event){
$('.alphabet-letter').hide();
$('#'+$(this).data('id')).show();
}).first().prop('checked', true).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" data-id="aa">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing" data-id="bb">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price" data-id="cc">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="aa" class="alphabet-letter">
a
</div>
<div id="bb" class="alphabet-letter">
b
</div>
<div id="cc" class="alphabet-letter">
c
</div>
Wouldn't even be easier just to have one "result" div?
Something like this
EDIT: For displaying the "a" as default either you just put "a" in the result div, or maybe on load you get the text (in this case you are not using the value) of the radio button option selected as per the edit in the snippet
$('#result').text($('input:radio[name=radiogroup1]:checked').parent().text());
$( ".radio input" ).click(function() {
var label = $("label[for='"+$(this).attr('id')+"']");
console.log(label);
console.log(label.html());
$('#result').text(label.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="fieldset-content">
<div class="radio">
<input type="radio" value="one" name="radiogroup1" id="r-learn-more" checked="">
<label for="r-learn-more">a</label>
</div>
<div class="radio">
<input type="radio" value="two" name="radiogroup1" id="r-book-viewing">
<label for="r-book-viewing">b</label>
</div>
<div class="radio">
<input type="radio" value="three" name="radiogroup1" id="r-closing-price">
<label for="r-closing-price">c</label>
</div>
</div>
<div id="result" style="display: block;">
<!--Alernative to load the text by jquery you could just put here "a"-->
</div>

How to change the checked value using javascript

I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();
Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>

Categories