Is it possible within a radio-group to change the style of a radio button that has not been checked after the other button has been checked?
I have 5 radio boxes. I gave a custom style to the checked ones with the :checked pseudo class. But when a control is checked I want the others to be less visible. I used the negation :not(:checked), but in case none of the controls is checked, all of them are less visible. I just want the unchecked controls of a radio-group to be less visible after another control of this group has been checked.
How can I do this with javascript or css?
The OP might make use of the :focus-within css pseudo class like demonstrated with the below provided example.
/*
fieldset:focus-within span {
opacity: .3;
}
fieldset:focus-within [type="radio"]:focus + span {
opacity: 1;
}
*/
fieldset:focus-within [type="radio"]:not(:checked) + span {
opacity: .3;
}
<form>
<fieldset>
<legend>1st radio group</legend>
<label>
<input type="radio" name="foo-bar"/>
<span>Foo</span>
</label>
<label>
<input type="radio" name="foo-bar" checked/>
<span>Bar</span>
</label>
<label>
<input type="radio" name="foo-bar"/>
<span>Baz</span>
</label>
</fieldset>
<fieldset>
<legend>2nd radio group</legend>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Bizz</span>
</label>
<label>
<input type="radio" name="bizz-buzz"/>
<span>Booz</span>
</label>
<label>
<input type="radio" name="bizz-buzz" checked/>
<span>Buzz</span>
</label>
</fieldset>
</form>
The next provided example applies fixes and improvements (e.g. tab navigable, valid markup, no empty / or unnecessary decorating span elements) to the OP's codepen code.
body { zoom: .9; }
fieldset { margin: 0 0 5px 0; padding: 0; border: none; }
.insurance-container [type="radio"] {
/*
do not apply ... display: none; ...
for it will prevent tab navigation.
*/
position: absolute;
left: -40px;
}
.insurance-container label {
position: relative;
}
.insurance-container .insurance-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
border: 1px solid #e9e9e9;
padding: 6px;
}
.insurance-container .insurance-item::after {
/*
- do not rely on empty elements for visually
drawing a replacement of a form-control.
- use one of the pseudo elements like `::after`
or `::before` for such purpose.
*/
content: "";
height: 16px;
width: 16px;
background-color: #dddddd;
border: 1px solid #dddddd;
border-radius: 50%;
transition: 500ms all;
-webkit-transition: 500ms all;
-moz-transition: 500ms all;
-ms-transition: 500ms all;
-o-transition: 500ms all;
}
.insurance-container [type="radio"]:checked + .insurance-item::after {
border-color: #0078d6;
border-width: 8px;
}
.insurance-container [type="radio"]:checked + .insurance-item {
border: 1px solid #0078d6;
background-color: #f8f8f8;
}
.insurance-container:focus-within [type="radio"]:not(:checked) + .insurance-item {
/* make use of the `:focus-within` pseudo class */
opacity: 0.5;
}
<fieldset class="insurance-container">
<legend>first radio group</legend>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-1" name="first-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>
<fieldset class="insurance-container">
<legend>second radio group</legend>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
<label>
<input type="radio" value="insurance-2" name="second-group"/>
<span class="insurance-item">
<span class="wb-type-heading-xs">Input Title</span>
<span class="wb-type-price">Number Value</span>
<span class="wb-type-price">Custom Text</span>
</span>
</label>
</fieldset>
Related
I'm doing contact form here all name, email, phone number validations are working fine. but when I click to submit button alert is not working here I use ngMessage directive for validation.I just start learning angularjs.So, Is there any other alternate way for validation which is simple and have less code.
Help will be appreciated..
this is my code.
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
ng-submit="Testform.$valid && submitForm()">Submit</button>
</form>
</body>
ng-submit should be on form tag instead of button
var app = angular.module('myApp', ['ngMessages']);
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
alert('Form submitted');
};
});
body { font: 12px Arial, Helvetica, sans-serif;}
.formbg {
width: 50%;
margin: 0 auto;
padding: 20px 20px 20px 20px;
color: #444444;
background: #4cb0db;
}
.formbg label {
display: block;
margin: 0px 0px 5px;
}
.formbg input[type="text"],
.formbg input[type="email"],
.formbg input[type="number"] {
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
}
div{
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js"></script>
<body ng-app="myApp">
<form name="Testform" ng-controller="nameController" class="formbg" ng-submit="submitForm()">
<label>First Name:</label>
<input type="text" name="userName" ng-model="firstName" required />
<div ng-messages="Testform.userName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required />
<div ng-messages="Testform.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="number" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="Testform.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<button type="submit"
>Submit</button>
</form>
</body>
In submit button Instead of ng-submit use ng-click.
Demo link
You can use below code,
<form name="Testform" ng-controller="nameController" class="formbg" ng-
submit="submitForm()">
.
.
<button type="submit">Submit</button>
app.controller('nameController', function ($scope) {
$scope.submitForm = function() {
if($scope.Testform.$valid == true)
{
alert('Form submitted');
}
else
{
alert('Form submit failed');
}
};
});
I have a multistep form. I have ng-show which depends whether or not the input[type="text"] is empty.
Now, it works for one section of the form, but doesn't work for another section of the form.
<div id="wrapper-signup">
<h1>Borrower Signup</h1>
<p>Register and start borrowing money online.</p>
<div class="element-wrap">
<label>NAME<br>
<div class="name-wrap">
<input type="text" ng-model="newuser.firstname" name="firstname" id="firstname" value="" placeholder="First Name">
<input type="text" ng-model="newuser.lastname" name="lastname" id="lastname" value="" placeholder="Last Name">
</div>
<p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.firstname.$dirty && newuser.firstname.length === 0">Firstname required</p>
<p class="error" style="width: 45%; color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.lastname.$dirty && newuser.lastname.length === 0">Lastname required</p>
</label><br>
</div>
<div class="element-wrap">
<label for="email">EMAIL
<div class="email-num-wrap">
<span class="awesome-icon"><i class="fa fa-envelope-o fa-lg email-icon" aria-hidden="true"></i></span><input type="email" id="email" ng-model="newuser.email" name="email" value="" placeholder="Email ID" required>
</div>
<p class="error" style="color: red; font-size: 0.9em;" ng-show="signForm.email.$invalid && signForm.email.$dirty">Enter a valid email</p>
</label>
</div>
<div class="element-wrap">
<label>MOBILE NUMBER
<div class="email-num-wrap">
<span class="awesome-icon"><i class="fa fa-mobile fa-lg mobile-icon" aria-hidden="true"></i></span><input type="number" id="number" ng-model="newuser.number" name="mobile" ng-minlength="10" ng-maxlength ="10" value="" placeholder="Enter 10 digit number" required>
</div>
<p class="error" style="color: red; font-size: 1em;" ng-show="signForm.mobile.$dirty && (signForm.mobile.$error.minlength || singForm.mobile.$error.maxlength)">Please enter a 10 digit number</p>
</label>
</div>
<div class="clear">
</div>
<div class="checkbox-wrap">
<input type="checkbox" class="checkbox" name="terms" value="" ng-model="tcheck" required><p class="checkbox-text">I have read and agree to the Privacy Policy, Terms of Use and consent to Electronic Disclosures.</p>
</div>
<div class="checkbox-wrap">
<input type="checkbox" class="checkbox" name="condiiton" value="" ng-model="ccheck" required><p class="checkbox-text">I authorize RupaiyaExchange to share my details with other Financial Institutions for credit card check and faster processing of loan.</p>
</div>
<a ui-sref='index.otp' ng-show="signForm.email.$valid && tcheck && ccheck && signForm.mobile.$valid && newuser.firstname.length !== 0 && newuser.lastname.length !== 0 " class="submit-signup">SIGNUP</a>
</div>
It works for above view, but doesn't work for below view
<div id="wrapper-identity">
<p>Please enter the following details</p>
<div class="aadhar-wrap">
<label for="aadhar">Aadhar Card</label><br>
<input type="text" name="aadhar" ng-model="newuser.aadhar" id="aadharN" value="" placeholder="Enter Aadhar Card No" required>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && newuser.aadhar.length === 0">Aadhar number required</p>
</div>
<div class="pan-wrap">
<label for="pan">PAN</label><br>
<input type="text" name="pan" ng-model="newuser.pan" value="" id="panN" placeholder="Enter PAN No" required>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && newuser.pan.length === 0">PAN number required</p>
</div>
<input type="submit" ng-hide="signForm.aadhar.$dirty && newuser.pan.length === 0 && signForm.pan.$dirty && newuser.aadhar.length === 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
</div>
I don't want to populate this place, since the css file is very large.
Here's the plunker https://plnkr.co/edit/PEhGJ50XGjYxQcetTxNV?p=preview
Do not check for length rather check for the value newuser.pan
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.aadhar.$dirty && !newuser.aadhar">Aadhar number required</p>
<p class="error" style="color: red; font-size: 0.9em; clear: both; margin-bottom: 0; padding-bottom: 0;" ng-show="signForm.pan.$dirty && !newuser.pan">PAN number required</p>
Try to investigate the values returned by each condition in each situation.
For example, try to use this in your partial:
<p>
DEBUG: {{ signForm.aadhar.$dirty }} && {{ newuser.pan.length === 0 }} && {{ signForm.pan.$dirty }} && {{ newuser.aadhar.length === 0 }}
</p>
The mistake is in the ng-hide expression. You should use ng-show, also inverting the length controls:
<input type="submit" ng-show="signForm.aadhar.$dirty && newuser.pan.length != 0 && signForm.pan.$dirty && newuser.aadhar.length != 0" ng-click="go('/index/done')" name="submit-info" value="Submit" id="submit">
It controls if both of the inputs have been changed an there is some value in them. If the condition holds, Submit button appears, otherwise it's hidden.
The repo is here: https://github.com/sjzerneri/mad-lib-project/ and the live preview is here: http://sjzerneri.github.io/mad-lib-project/
I have an ng-hide in my html that operates correctly before I start trying to adjust the css to animate it.
When I try to animate it with ng-hide-add and ng-hide-remove, the section fades out, and then promptly reappears instead of hiding. Why doesn't the section stay hidden?
Here's my HTML for the section:
<section class="word-inputs" ng-hide="hideForm && myForm.$valid">
<h3> Provide The Following Words:</h3>
<div class="all-words">
<form name="myForm" ng-submit="submitted=true;submit()">
<div class="word-selection">
<input type="text" ng-model="name" placeholder="name" required>
<input type="text" ng-model="jobtitle" placeholder="job title" required>
<input type="text" ng-model="tedioustask" placeholder="tedious task" required>
</div>
<div class="word-selection">
<input type="text" ng-model="dirtytask" placeholder="dirty task" required>
<input type="text" ng-model="celebrity" placeholder="celebrity" required>
<input type="text" ng-model="uselessskill" placeholder="useless skill" required>
</div>
<div class="word-selection">
<input type="text" ng-model="obnoxiousceleb" placeholder="obnoxious celeb" required>
<input type="number" ng-model="hugenumber" placeholder="huge number" required>
<input type="text" ng-model="adjective" placeholder="adjective" required>
</div>
<div class="hor-line"> </div>
<div class="submission">
<button type="submit">Generate Mad Lib</button>
</div>
</form>
</div>
</section>
Here's my css:
.word-inputs {
padding-top: 2rem;
margin: 0 auto;
width: 90%;
text-align: center;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
display: block!important;
}
.word-inputs.ng-hide-add.ng-hide-add-active,
.word-inputs.ng-hide-remove {
opacity: 0;
}
.word-inputs.ng-hide-add,
.word-inputs.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Add an extra div for your animation class
like
<section ng-hide="hideForm && myForm.$valid">
<div class="word-inputs" >
<h3> Provide The Following Words:</h3>
.....
</div>
</section>
I have 2 radio buttons of the same ng-model now I want to make textbox disabling and enabling on based on first radio button clicking. How to get the individual status of first radio button to enable my text box
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng- disabled="!remind.daily">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays">
<p id="type-recurrence">Every WeekDays</p>
</div>
i have created a plunker:https://plnkr.co/edit/6zrIOUwRh7IczufnMGa6?p=preview
html:
<body ng-controller="radioController">
<div style="display: flex; padding: 20px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="Every" ng-click="getRadioValue()">
<p id="type-recurrence">Every</p>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!flag">
</div>
<div style="display: flex; padding: 8px 0px 0px 12px;">
<input type="radio" name="dailyRadio" ng-model="remind.daily" value="EveryweekDays" ng-click="getRadioValue()">
<p id="type-recurrence">Every WeekDays</p>
</div>
</body>
js:
var APP = angular.module("APP",[]);
APP.controller("radioController", function($scope){
$scope.remind = {};
$scope.getRadioValue = function(){
if($scope.remind.daily == "Every"){
$scope.flag = true;
}
else {
$scope.flag = false;
}
}
})
hope it works!
First of all the ng-model (confirmed) set for the radio button should have a boolean value, and then you can directly use that model for ng-disabled directive of your text field.
//controller
function Controller($scope){
$scope.confirmed=true;
...
}
//html code
<div ng-app>
<div ng-controller="Controller">
<input type="checkbox" ng-model="confirmed" ng-change="change()"/>
<div>{{confirmed}}</div>
<input type="text" id="days" ng-model="remind.dailyDays" ng-disabled="!confirmed">
</div>
</div>
Live Demo # JsFiddle
I have set up radio buttons to display inline on a contact form. They display properly in all tested browsers except IE7, they will not display inline. They are set up using ul and li.
CSS for radio buttons
fieldset div ul {
margin: 5px 0 0 0;
list-style:none;
display:block;
float:left;
}
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:none;
}
fieldset div ul li label {
display: inline;
float: none;
font-size: 1em;
font-weight: normal;
margin: 0;
padding: 0;
}
fieldset div ul li input {
background: none;
border: none;
display: inline;
margin: 0 5px 0 0;
padding: 0;
width: auto;
float:none;
}
HTML for form
<fieldset>
<!-- Your Name -->
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="required"/>
</div>
<!-- Email -->
<div>
<label for="emailAddress">Email</label>
<input type="text" name="emailAddress" id="emailAddress" class="required email"/>
</div>
<!-- Phone -->
<div>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" />
</div>
<!-- Contact Time -->
<div>
<label for="contactTime">Best Time to Contact</label>
<ul>
<li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
<li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
<li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
</ul>
</div>
<!-- Contact Method -->
<div>
<label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
<ul>
<li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
<li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
</ul>
</div>
<!-- Coments -->
<div class="floatLeft" style="margin:10px 0 0 0;">
<label for="mess">Message</label>
<textarea name="mess" id="mess" rows="15" cols="5"></textarea>
</div>
<!-- Controls -->
<div class="controls">
<input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
</div>
</fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>
Try setting them to float left -
fieldset div ul li {
margin: 0 15px 0 0;
padding: 0;
list-style:none;
display:inline;
float:left;
}
Shouldn't affect any other browsers, and should sort out IE7. Don't forget to clear: left; after them though.