Radio input values not populating - javascript

I am trying to populate the radio input values on the page but the code I used below does not work. It does not populate, fetch or show on the database and the front page.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});
.show_field {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
</div>

Besides the fact that your HTML and JavaScript is not correct I will try to show you how to show and hide elements based on the selected value.
$(document).ready(function() {
$('.trigger').click(function() {
$('.show_field').hide();
$('.' + $(this).data('rel')).show();
});
});
.show_field {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-3 control-label">Question here?</label>
<div class="col-sm-5">
<label>
<input type="radio" name="option" class="trigger" data-rel="yes" id="edit_checked" value="Yes" />Yes
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="no" id="edit_checked" value="No" />No
</label>
<label>
<input type="radio" name="option" class="trigger" data-rel="unknown" id="edit_checked" value="Unknown" />Unknown
</label>
</div>
<div class="show_field yes">
yes
</div>
<div class="show_field no">
no
</div>
<div class="show_field unknown">
unknown
</div>
To dynamically set the checked value of the radio group you first select the radio group and specify it with the radio input based on the data-rel aatribute.
var value = 'yes';
$("input[name=option][data-rel=" + value + "]").prop('checked', 'checked');

I believe the problem you're having is syntactical in nature. If your code is exactly as you have it above, you're missing your closing }); on your $(document).ready(function(){});.
I've recreated your code in this Fiddle. It seems to be working as I understand your problem.

Related

Clicked state; styling on groups of form controls

I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.
You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>

Get radio button label from different radio button groups and append to division

There are 3 radio button groups for user to select.
Division '#targetOption' will get whenever the user checked radio button label to be displayed. Below my code which is able to get the first checked radio button.
Example if user click on the first radio button group, #targetOption will show A. Then if user click on the second radio button group, #targetOption will show A B.
<div id="options">
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="a">
A
</label>
</div>
<div class="radio">
<label> <input type="radio" value="b">
B
</label>
</div>
<div class="radio">
<label> <input type="radio" value="c">
C
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="d">
D
</label>
</div>
<div class="radio">
<label> <input type="radio" value="e">
E
</label>
</div>
<div class="radio">
<label> <input type="radio" value="f">
F
</label>
</div>
</div>
<div class="form-group required">
<div class="radio">
<label> <input type="radio" value="g">
G
</label>
</div>
<div class="radio">
<label> <input type="radio" value="h">
H
</label>
</div>
<div class="radio">
<label> <input type="radio" value="i">
I
</label>
</div>
</div>
</div>
<div id="targetID"></div>
$('#options').click(function() {
$('#targetID').html('');
$("input[type='radio']:checked").each(function() {
var optiontext = $(this).parent().text();
console.log(optiontext);
$('#targetID').html(optiontext);
});
});
$('#targetID').html(optiontext); set #targetID to the current radio value in the loop instead of appending it to #targetID.
Use $('#targetID').html($('#targetID').html() + optiontext); instead.
Or you can create an array to store the checked values and update #targetID later

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

Radio button clicked with label

I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.
The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked.
In order for the code to work the <label> has to stay arround the <input> tag.
<div class="radio-toolbar">
<label class="BottomLeft">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
</label>
<label class="BottomRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
</label>
<label class="Dual">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
</label>
<label class="DualRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
</label>
<label class="Duplex">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
</label>
<label class="Custom">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
</label>
</div>
Here's the JSfiddle
You can try this:
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is the FIDDLE.
Also, you must have unique ID's in html.
To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.
<div class="radio-toolbar">
<label for="first">
Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" />
</label>
<label for="second">
AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
</label>
<label for="third">
Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" />
</label>
<label for="fourth">
Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
</label>
<label for="fifth">
Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
</label>
<label for="sixth">
Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
</label>
</div>
Try this.I have changed backgorund color checked radio button to orange with jquery
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});

Make Text Bolder By selecting radio button

I m new to jquery,I am supposed to do the simple task.If i click on the radio button means the text along with that radio button has to be bolded.please help me with this one.My HTML Markup is here
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label>
<input type="radio" name="optradio">IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label>
<input type="radio" name="optradio">
</label>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>
And my jquery code is here
$(document).ready(function(e) {
$(".radio label input").click(function() {
$('.radio').each(function(event) {
if ($(this).hasClass('active')) {
$(this).css("font-family", "helveticabold");
$('.radio').removeClass('active');
if ($(this).next().hasClass('radio'))
$(this).next().addClass('active');
else
$('.radio:last-child').addClass('active');
return false;
}
});
});
});
I know it needs small changes in code please help me out guys
You don't need to use each as only one radio can be selected.
This will do:
Javascript:
$('.radio').on('click', function() {
$('.bold').removeClass('bold');
$(this).addClass('bold');
});
CSS:
.bold {
font-weight: 800;
}
Demo: https://jsfiddle.net/tusharj/3zzaLre0/
You can use $(this) selector for that
$(document).ready(function(e) {
$("input[type='radio']").click(function() {
$("input[type='radio']").parent().css('font-weight','');
$(this).parent().css('font-weight','bold');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form role="form">
<p><b>What concerns you most as you manage your business?</b>(Select all that apply.)</p>
<div class="radio active">
<label><input type="radio" name="optradio"><span>IT infrastructure alignment with business goals and growth<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Controlling capital and expense<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Managing financial risk<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Data security and privacy<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Flexibility of services to meet customer needs<img /></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"><span>Political climate for business<img /></label>
</div>
<div class="form-group radio">
<label><input type="radio" name="optradio"></label><span>
<textarea class="form-control" rows="2" placeholder="Other(please specify)" id="comment"></textarea>
</div>
</form>

Categories

Resources