Perform an action when radio button choice is toggled - javascript

I am trying to make a form with radio button in bootstrap, such that whenever a radio button is toggled, a different form with new fields should appear subsequently:
<tr>
<td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>
<td>
<select id="whatever" name="whatever" class="input-group">
<input type="radio" name="radioName" value="1" />one<br />
<input type="radio" name="radioName" value="2" />two<br />>
</select>
</td>
</tr>
If user selects option 1, form 1 needs to be displayed just below it otherwise form 2 needs to be shown.
The form 1 looks like:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>
The form 2 looks exactly the same with different label:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>

You can use Jquery to do this easily.
First you can use the .val() function to get the value of the radio button you checked.
Then you can use the hide/show functions to show the right form and hide the other.
I hope this helps you out.

First, you'll need different ID's for your table rows. Two elements cannot share the same ID. You can listen for changes with the change function and then toggle the visibility of both rows at the same time by using the comma to grab multiple selectors and then show/hide each respectively with toggle
$('input[name="radioName"]').change(function () {
$("#whatever_description1, #whatever_description2").toggle();
});
Here's a demo in fiddle
If you want more control, see get value from radio group using jquery

Related

Best way to build a checkbox or radio button to be able to be referenced in a Java Script function?

Im pretty new to html and I am building a webpage in html for work. It is basically a list of standards that a reviewer goes over and determines if a plan given to him/her meets those standards. I need to have either a checkbox(s) or radio button for "Accepted" and "Incomplete", but I need to be able to reference them later on with Java Script to run a report for the reviewer. Whats the best way to do this and should I use check boxes or radio buttons? I have my code attached, I am basically creating a bunch of rows in the table
<table style="width:100%">
<tr>
<td> <!--standard number--></td>
<td><!--standard name--></td>
<td> <input type="checkbox"> </td> <!--accepted checkbox-->
<td> <input type="checkbox"> </td> <!--incomplete checkbox-->
<td> <input type="text"> </td> <!--comments field-->
</tr>
</table>
Welcome and Thanks for asking the question.
So the difference between checkbox and radio button is with checkbox you can select as many as you want (e.g. Red/Green/Yellow/Blue) and with radio button you have a group where you select only one (e.g. Yes/No)
I created a fiddle with your example to show you how to access those elements: https://jsfiddle.net/vrjzfyun/
var accepted = document.querySelector("#cbAccepted");
accepted.checked = true;
Let us know if you have more questions.

Angularjs ng-show not working with checkbox with default value true in jsp

<tr>
<td><input type="checkbox" ng-model="<%=cat4%>" ng-checked="true"> </td>
<td>
<%=cat2%>
</td>
<td><input type="text" class="txt" ng-show="<%=cat4%>" placeholder="Enter Price per <%=cat2%>" value="<%=temps[i]%>"></td>
</tr>
I want to display the text box when checkbox is checked. The checkbox is by default checked. When the check box is unchecked then the text box should be hidden. Using the above code the checkbox is checked but the textbox is not displayed (when the form loads). When I uncheck and again check the checkbox then only the text box is displayed. What changes are needed in the code?
unchecking it doesn't make it false
use ng-change to turn it for false to true and vice versa

Radio buttons with filter using ng-repeat in angular behaving unexpectedly

I have 2 issues that are occurring when i use radio buttons in angular.
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.
Basically I want the All() radio button to show unfiltered results.
Here is the plunker:
http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview
<body ng-controller="candyController">
<input type="radio" value="" checked="checked" ng-model="$parent.selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" value="{{candy.name}}" ng-model="$parent.selectedCandy" name="Candy" />
{{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and here is the controller
var app = angular.module('angularjs-starter', []);
app.controller('candyController', function($scope) {
$scope.candyList = [
{name:"lolipop", cost:10},
{name:"popsicle", cost:100},
{name:"ringpop", cost:50},
{name:"mint", cost:2},
{name:"chocolate", cost:85},
{name:"candycorn", cost:1}
];
});
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
For this I would set the property on the scope in the controller when it is initiated: $scope.selectedCandy = "";
When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.
The problem seems to be with your scope. You target selectedCandy on the $parent scope when repeating the radio buttons (which is correct because your controller scope is above your repeater scope).
When you use $parent.selectedCandy on the radio outside of the repeater it is looking above its scope and not on the controller scope.
Simply remove $parent from the "all" radio.
**ng-value Per Docs**
Binds the given expression to the value of <option> or input[radio],
so that when the element is selected, the ngModel of that element is
set to the bound value.
Use ng-value instead of value attribute for make binding workable with respective ng-model on the radio button.
Additionally the (All) radio button doesn't need $parent anotation. it should be directly used as ng-model="selectedCandy", for inner radio button will need $parent because we want to refer controller scope variable.
Markup
<body ng-controller="candyController">
<input type="radio" ng-value="" checked="checked" ng-model="selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" ng-value="candy.name" ng-model="$parent.selectedCandy" name="Candy" /> {{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>

How can I hide/show textboxes based on drop down menu selection?

I have a drop down menu for which one option is 'Other'. Each option is tored in a table with an id ie if OptionId = 6, OptionDescription is "Other".
If 'Other' is chosen, a text box should appear for the user to enter specifically what the other criteria is:
<tr>
<td class="labels">
Option:
</td>
<td colspan="3">
<%=Html.DropDownList("OptionId", Utilities.OptionLookup(), "-Select One-") %>
</td>
<td>
<input id="OtherOption" type="text" />
</td>
</tr>
In this case, Utilities.OptionLookup() gets the values from my Option table and populates the dd. At the moment, I just have a a plain textbox OtherOption.
I've used javascript before to do something like this but it's based on a click event. So, I set the text box to 'display:none', use onclick to name my script and do the visible true or false in my script.
I want to be able to do something similar but when 'Other' is selected in my drop down.
What's the best way to do this?
You can do it the same way, but instead of the onclick event, you utilize the onchange event.

jQuery - Populate closest hidden input with radio's value

I have the following HTML and jQuery to populate hidden fields within each <td> element:
<td>
<div id="sex_div" style="text-align: left; width:120;">
<input type="hidden" id="sex" value=""/>
<input type="radio" id="sex_male" name="sex_div" value="M"/><label for="sex_male">Male</label>
<input type="radio" id="sex_female" name="sex_div" value="F"/><label for="sex_female">Female</label>
</div>
</td>
The jQuery I have is as follows:
$("input :radio").click(function() {
$(this).siblings("input [type='hidden']").val($(this).val());
});
and obviously the buttonset,
$("#sex_div").buttonset();
This is just a small part of the whole form. The rest all looks similar.
Now the issue is that the hidden field is not being set when clicking/selecting a radio button. I have been struggling with this seemingly easy problem for two days now!
Thanks for any help!
$(this).siblings("input[type='hidden']").val($(this).val());
There should be no space between input and [type='hidden']. Spaces in selectors mean to search for descendant elements that match the next token.
you need to remove space in your selector
$("input:radio").click(function() {
$(this).siblings("input[type='hidden']").val($(this).val());
});

Categories

Resources