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()">
Related
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 would like to show and hide addtional input fields depending on a radio button value.
Radio
<div class="form-group">
<label>Was möchten Sie bewerten?</label>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value="ETW">Eigentumswohnung</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value= "EFH">Einfamilienhaus</label>
</div>
<div class="radio">
<label><input type="radio" [(ngModel)]="type" name="type" value="ZFH">Mehrfamilienhaus</label>
</div>
</div
This form/elemnt I would like to show if the value of type is "EFH" or "ZFH"
<div *ngIf="" class="form-group">
As your radio buttons are binded to some property using ngModel, you can use your radio buttons model property to check (show/hide) the div's.
Example :
<div *ngIf="type == 'EFG' || type == 'ZFH'" class="form-group">
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>
I am trying to change content using radio buttons. content changes when click on radio button but radio is not checked it stays empty, i know something is wrong, can someone suggest me a solution.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['OneWayFlight']" id="oneWayFlight" name="FlightType" />
<label for="oneWayFlight">One way</label>
</div>
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-link="['ReturnTripFlight']" id="roundTripFlight" name="FlightType"/>
<label for="roundTripFlight">Round Trip</label>
You can use ng-model instead of ng-link.
<div class="radio-custom radio-default radio-inline">
<input type="radio" ng-model="flightType" value="Round Trip">Round trip<br/>
<input type="radio" ng-model="flightType" value="One Way">One Way<br/>
<tt>Flight Type = {{flightType | json}}</tt><br/>
</div>
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.