I am trying to create selection when new user is created it will need a group. It is working nicely, but the "checked" option doesn't work for some reason. How can I make the "user" as checked so it would be true if create new user button is pressed?
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" checked> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
<button class="btn-sonera" ng-click="createUser(user, groups)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
With AngularJs best is use its directive:
ng-checked="variable"
I managed to make it checked with ng-init="groups.group=1" Because I need the value assigned to the radio. Is there something wrong using it this way?
Full code
<div class="radio-group" required>
<h3>Set user group</h3>
<label class="radio-inline">
<input type="radio" name="groupradio" value="2" ng-model="groups.group" required> Admin
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="1" ng-model="groups.group" ng-init="groups.group=1"> User
</label>
<label class="radio-inline">
<input type="radio" name="groupradio" value="3" ng-model="groups.group"> Viewer
</label>
</div>
Here is a working plunker: https://plnkr.co/edit/4VtblBSWROLTETW5Ie5C?p=preview
The core code:
$scope.groups = {
admin : false,
user: false,
viewer: false
};
And in the view:
<button class="btn-sonera" ng-click="groups.user=true"><i class="fa fa-floppy-o" aria-hidden="true"></i> Create user</button>
Note how each ng-model is bound to an object, ie: groups.admin, groups.user etc.
Could you please try by using ng-value
<label>
<input type="radio" ng-model="groups.group" value="1">
Admin
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="2">
User
</label><br/>
<label>
<input type="radio" ng-model="groups.group" value="3">
Viewer
</label><br/>
in controller
$scope.createUser = function(user, groups){
groups.group = "2";
};
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
i have a problem with my jQuery code and my radio buttons,
if i selected one button and another he stay checked i don't know how to fix that if someone can help me to slove my problem thank you. I leave my code and screenshoot to see what actualy happend.
$("#custom").click(function() {
$(".custom").css({
"display": "block"
})
})
$("#man").click(function() {
$(".custom").css({
"display": "none"
})
})
$("#ladies").click(function() {
$(".custom").css({
"display": "none"
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="ladies" name="ladies" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="man" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="custom" value="custom">
<label for="custom">Custom</label>
<i class="fas fa-question-circle fa-1x"></i>
<div class="custom">
<form action="#">
<select name='gender' id='gender'>
<option value='gender' disabled>Select the pronoun you are using</option>
<option value='she'>She: "Wihs her a happy brithday"</option>
<option value='he'>He: "Wish him a happy birthday!"</option>
<option value='he/she'>He / She: "Wish him / her a happy birthday!"</option>
</select>
<p class="genderTxt">The chosen pronoun is visible to everyone.</p>
<input type="text" class="optionalG" placeholder="Gender (optional)">
</form>
</div>
I do not have any error message to show up.
The name attribute on the group of radio buttons need to have the same name.
Change this:
<input type="radio" id="ladies" name="ladies" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="man" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="custom" value="custom">
<label for="custom">Custom</label>
To this
<input type="radio" id="ladies" name="radioGroup" value="ladies">
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="radioGroup" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="radioGroup" value="custom">
<label for="custom">Custom</label>
The name doesn't need to be "radioGroup", but it needs to be the same so the code can tell which groups of radio buttons belong together.
All <input type="radio"> tags need the same name attribute. Then it will work.
<input type="radio" id="ladies" name="gender" value="ladies" checked>
<label for="ladies">Ladies</label>
<input type="radio" id="man" name="gender" value="man">
<label for="man">Man</label>
<input type="radio" id="custom" name="gender" value="custom">
<label for="custom">Custom</label>
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>
I have created two radio button for gender, I want to display radio button checked that was previously selected.
I have added below code in Template
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
</div>
</div>
I have added below code in Component.
console.log(this.gender); // I am getting 'male' here.
this.editProfile = new FormGroup({
gender: new FormControl(this.gender || null)
});
Other value of the form is getting displayed but radio button is not getting checked.
You can write it like
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
</label>
<button type="submit" [disabled]="form.invalid">Submit</button>
{{form.value|json}}
</form>
It should work for you
Find a PLUNK here
I have found other solution. We can use below code
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".
<div class="form-group">
<label>Gender</label>
<div id="input-type">
<label class="radio-inline">
<input type="radio" formControlName="gender" value="male"/> Male
</label>
<label class="radio-inline">
<input type="radio" formControlName="gender" value="female"/> Female
</label>
</div>
</div>
I am working on a product configurator with interdependencies and many options. I'm looking for a solution how to restore the selected state for the form without saving data on the server.
My idea:
the customer makes his choice with checkboxes and radio button on
the website (simple example: http://jsfiddle.net/benroe/6JRAm/5/)
customer print out the custom product with a short number at the
bottom ("configuration number")
the employee in the store types in the "configuration number" on the
website and same selected state (checkbox and radio button) are selected
But how to generate a short number for every possible unique states?
Simple example for the form:
<h1>Product Configurator</h1>
<form>
<p>
<label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
</p>
<p>
<label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
</p>
<p>
<label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
</p>
<p><input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"></p>
</form>
<p>Configuration Number: <input type="text"></p>
Something like this? but adding the customer id:
http://jsfiddle.net/6JRAm/23/
$('#saveForm').click(function() {
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
return $(this).val();
}).get().join('-');
alert(configuration);
});