This should be a simple question.
I'm having trouble using ng-if with radio buttons. These are my buttons:
<label class="radio-inline">
<input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
month
</label>
<label class="radio-inline">
<input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
week
</label>
How can I use ng-if to show something if the first radio button is selected?
The binded model day_month will be updated upon select with the value of the input. Checking if the value equals to the value will give you the possibility to check whether the input has been selected. Please see the example below.
<label class="radio-inline">
<input type="radio" id="day_month" ng-model="day_month" name="inlineRadioOptions" value="option1"> day of the
month
</label>
<label class="radio-inline" ng-show="day_month == 'option1'">
<input type="radio" id="day_week" ng-model="day_month" name="inlineRadioOptions" value="option2"> day of the
week
</label>
Seems like you need to show and hide some content based on selection of radio button. We can directly bind a Boolean value to check box and do it very easily. If you want do it with radio button please find below solution.
HTML :
<body ng-app=”app”>
<div ng-controller="PageController">
<label>
<input type="radio" ng-model="color.name" value="Red"> Red
</label>
<label>
<input type="radio" ng-model="color.name" value="Green"> Green
</label><br>
<div ng-if="color.name==='Red'?true:false">
Hidden Message
</div>
</body>
Angualr controller:
var app =angular.module("app",[]);
app.controller("PageController",function($scope){
$scope.color={name:'Green'};
});
Working example
https://jsfiddle.net/mshyam83/q8vbbd8q/5/
Your model will be updated with whatever value is in the [value] attribute, so you can check the data stored in whatever variable is specified by ng-model:
<div ng-if="day_month === 'option1'">...example...</div>
Related
How can I select input type radio by just clicking the space around it?
You could use a <label> tag:
<input type="radio" name="box" id="box">
<label for="box">Your content here</label>
Clicking on the label toggles the input.
You should be using the label element. There are two ways to use it with a radio button, as shown below.
<form>
<label>
<input type="radio" name="options">
<span>Option 1 - Inside Label</span>
</label>
<br>
<input type="radio" name="options" id="button2">
<label for="button2">
<span>Option 2 - Outside Label</span>
</label>
</form>
I have a long list of radio buttons. I am looking for a solution if a radio button is selected, the page scrolls to the beginning of the radio button.
Detail:
I have list of radio button like that:
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label id="divtwo" onclick="myMenu()" class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
Js file:
function myMenu() { document.getElementById("divFirst").scrollIntoView(); }
I am looking for a solution, if the user clicks on the first radio button, then the page scrolls to the beginning.
It does not scroll while I click, although I added onclick.
onclick="myMenu()" should be on checkbox not on Label:
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" onclick="myMenu()">
I have a multi-step form and currently using parsley for validation. Validation is performed on form elements when the next button is clicked. For some weird reason, validating radio buttons has turned out to be a huge problem.
JS
const firstName = $("#pi_fname").parsley();
firstName.isValid() // returns true or false depending on validation rules
const question1 = $("input[type='radio'][name='question1']").parsley();
question1.isValid() // produces Uncaught TypeError: question1.isValid is not a function
HTML
<div class="col-sm-12">
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios11" value="1"
data-required="true">
<label class="form-check-label" for="exampleRadios11">
Strongly disagree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios12" value="2">
<label class="form-check-label" for="exampleRadios12">
Disagree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios13" value="3">
<label class="form-check-label" for="exampleRadios13">
Neutral
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios14" value="4">
<label class="form-check-label" for="exampleRadios14">
Agree
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="exampleRadios15" value="5">
<label class="form-check-label" for="exampleRadios15">
Strongly agree
</label>
</div>
</div>
Parsley's documentation says
When doing $('#target').parsley() or new Parsley('#target'); on a
element (or , ), it will bind
the field and return a ParsleyField instance. Except for input types
radio and checkbox that don't have a name attribute or a
data-parsley-multiple attribute, they won't be bound (ignored) and
will eventually raise a warning in the console.
But the radio buttons have a name attribute. So why is it failing? Please help!!!
$("input[type='radio'][name='question1']") returns a jQuery set with multiple elements. Calling .parsley() on it will return an array of Parsley objects and not a Parsley element like you are expecting.
You should call .first().parsley().isValid(), or .parsley()[0].isValid(). There's nothing special about the first element of course, the result of isValid will be the same for any of the radios.
I have two "groups" of checkboxes (although the first group only contains one checkbox), but if user checks the checkbox from the first group I want to restrict the ability of checking the checkboxes from second group...
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" />If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio" value="1" name="group2" />1</label>
</div>
<div>
<h3>First group</h3>
<label>
<input type="checkbox" value="1" name="group1" id='Grp1'/>If checked, checks all the checkboxes in 2nd group</label>
<label>
</div>
<div>
<h3>Second Group</h3>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
<label>
<input type="checkbox" class="radio Grp2" value="1" name="group2" />1</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#Grp1').change(function() {
if($(this).is(":checked"))
{
$('.Grp2').prop('disabled', true);
}
else
{
$('.Grp2').prop('disabled', false);
}
});
</script>
I've used a simple jQuery script to solve it.
initially it didn't exactly do what I wanted it to do, but I've managed to work around it with php as I had to make sure that if someone checked the checkbox from the second group that it didn't go to the database.
$('#checkbox1').click(function() {
if( $(this).is(':checked')) {
$("#checkbox2").hide();
} else {
$("#checksbox2").show();
}
});
As for php I simply used a ternary operator to make sure that if checkbox with id checkbox1 is checked then I want to ignore the rest of the checkboxes...
$smnrs = !empty($_POST['all']) ? explode(';', $_POST['all']) : $_POST['seminars'];
in this case $_POST['all'] refers to the first checkbox that if clicked it hides the div holding the other checkboxes.
I'm improving my website, and it has the following dropdown where some can choose the sex:
<h2>Person Sex</h2>
<label for="sex"></label>
<select id="sex">
<option id="men">Men</option>
<option id="women">Women</option>
</select>
Perfect. To send to my backend is very simple, i just I get the value of #sex id and send too the backend through a ajax.
Now, i want use checkbox's:
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men"/><br/>
<label for="women">Women</label>
<input type="radio" id="women"/>
My question is: how can i associate the women or the men to only a label called sex? And how can i make impossible to choose both.
Thanks.
Use the name and value attributes of the inputs:
<label for="men">Men</label>
<input type="radio" id="men" value="men" name="sex" /><br/>
<label for="women">Women</label>
<input type="radio" id="women" value="women" name="sex" />
The name field on radio buttons allows them to be grouped. When submitting the form, the value of the selected item should be the value of the response for sex. For example, $sex = $_POST["sex"]; in PHP.
If you want a default value for your radio button group:
<input type="radio" id="women" value="women" name="sex" checked="checked" />
Add a name that is the same in both radio buttons. That way, only one can be chosen.
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men" name="sex"/><br/>
<label for="women">Women</label>
<input type="radio" id="women" name="sex"/>