I'm trying to implement bootstrap theme into new style for OpenLayers Layer Switcher control.
In bootstrap examples,I have noticed that input elements are nested within label elements like this:
<label class="radio span2">
<input type="radio" value="option1">
Cash
</label>
<label class="radio span2">
<input type="radio" value="option2">
Invoice
</label>
<label class="radio span2">
<input type="radio" value="option3">
Discover
</label>
It seems that when you click on the label of a radio button, it gets checked but not triggered. But when you click on the radio itself, it does get triggered. The same thing happens with checkboxes.But even if checkboxes are hit checked,click event is not triggered this time.
You can check out the code here
How can I solve this ?
You have registered a click event handler for your controls. If you don't click on a control the handler will not be called.
When a label is associated with an element, then a click on it will 'activate' the element. In case of a checkbox or radio button this means check / checked it.
Checkboxes can also be changed by other means, e.g. keyboard. So a click event handler is not the best choice. Use the change event instead.
Related
I am creating a Mullti-phase form using HTML and CSS which works fine. It has got a stepper at the top whereby I want to disable the 2nd and subsequent fields until a submit event is triggered on a button of the 1st phase. The code below controls the steppers. It has custom ids to control each stepper. When I add disabled property to the code the steppers dont move. How can I use vanilla Js or some jquery to make sure only the 1st phase is shown while others are disabled when a user first visits and form and subsequent phases only appear when an event is triggered in the previous phase ?
~ Thanks
Js Fiddle link for CSS and HTML code
http://jsfiddle.net/8c4ktyq5/
Raadio buttons that controls the steppers
<input checked='checked' id='step-1' name='step' type='radio'>
<input id='step-2' name='step' type='radio'>
<input id='step-3' name='step' type='radio'>
<input id='step-4' name='step' type='radio'>
<input id='step-5' name='step' type='radio'>
I am writing an Angular component which uses radio button (Need to use default radio buttons due to project constraints).
I need to print the value of the radio button (whether it is checked or unchecked). Like following:
<input type="radio" (change)="onUpdate($event)">
<p>{{isActive}}</p>
In the component something like this:
onUpdate(event) {
this.isActive = event.target.checked;
}
But this doesn't work as the change event is not triggered when the radio button is unchecked. Is there any way to intercept the event when the radio button is unchecked?
Please help. I am stuck. Dummy app link here
Edit: What I am trying to do
I am trying to write a custom radio button so that I can styles it on my own. I cannot write a radio-group component. Hence I need a wrapper component around the default one. Something like Stackblitz-link. I need the unchecked event because I have some custom element which has to be notified about this. Any way to achieve this ?
Use a checkbox, style it like a radio button. Seems to be the easiest solution and of course use ng-model instead of onChange.
You could replace (change) with (click), because every click on the radio button is a change anyway.
<input type="radio" (click)="onUpdate($event)">
<p>{{isActive}}</p>
The above is a solution, but I'd use this:
<input type="radio" [(ngModel)]="isActive">
<p>{{isActive}}</p>
It binds your radio button to your isActive property, so it changes dynamically with clicking.
So using two radio buttons got this working for me, let me know if you can model this for your application.
<input type="radio" name="button" [value]="checked" (change)="checked=!checked">
<input type="radio" name="button" [value]="!checked" (change)="checked=!checked">
<p>{{checked}}</p>
I am setting checked to false by default in my component.
Can you please try to adjust this logic with your code? Checking some new radio will uncheck other and we can keep track of this behavior.
<p>
<input type="radio" name="r1" value="one" [(ngModel)]="isActive">
<input type="radio" name="r2" value="two" [(ngModel)]="isActive">
<input type="radio" name="r3" value="three" [(ngModel)]="isActive">
</p>
<p>{{isActive}}</p>
Stackblitz link
I'm actually trying to disable a pair of radio buttons on the click of a button in my angularjs application.
Code Snippet of radio buttons is provided below here:
<div class="col-xs-4 btn-group" id="challenge-radio-btn">
<label class="radio-inline">
<input type="radio" ng-model="trigger" ng-value=false
name="{{path.id}} notChallengeTriggr"
ng-change = "onChange(x,y,z,w,a)"
ng-disabled="campaign.editnotscheduled || ischallengeTrigger"
checked> No
</label>
<label class="radio-inline">
<input type="radio" ng-model="trigger" ng-value=true
name="{{path.id}} challengeTriggr"
ng-change = "onChange(x,y,z,w,a)"
ng-disabled="campaign.editnotscheduled || ischallengeTrigger"> Yes
</label>
</div>
On click of the button, I have even tried printing the value of the expression which is getting evaluated inside of ng-disabled. On every click of this button, the value becomes true(as I have written js code-behind to make this true). Even the value of the ng-disabled expression is true, the radio buttons are not getting disabled.
On debugging, I had found a particular scenario where it wasn't working. Once I click on a specific dropdown in my application, after that if I come back & click on edit button to check whether these radio buttons are disabled or not. At that time, radio buttons are not disabled even though the ng-disabled expression value is true.
I think the logic of OR is causing the problem.
ng-disabled="campaign.editnotscheduled || ischallengeTrigger" checked>
ng-disabled="editnotscheduled || ischallengeTrigger">
If either of them is false.then your button should get disabled.
I am trying to run some function when clicking on the label text but the click event fired two times.
HTML
<label class="label_one">
Label One
<input type="checkbox"/>
</label>
But its not happening if I change the html code like this.
<label for="test" class="label_two">
Label Two
<input type="checkbox"/>
</label>
My script is this:
$('.label_one').click(function(){
console.log('testing');
});
Can anyone explain me why this is happening like this.
My jsfiddle is here check it ones.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/
It is because of event bubbling.
In general all elements bubble the event to the root of the document whereas the label tag will bubble the event to its child nodes and thats how the input tag is getting ticked when you click the label dom.
So in your case you attached the event handler to label tag so
It calls when label tag gets clicked
event bubbles inside it and checkbox gets selected and checkbox bubbles the event to its parent node that is label tag again hence it is called twice.
To solve this, just attach the event handler to input/checkbox tag it should work fine.
I couldn't reproduce this in the version of chrome that I'm using.
But if you're facing this in some browser, it's likely because -
According to spec, labels containing inputs, and the ones connected to an input via for attribute trigger a click on the associated input when they are clicked.
So in your first case, there are 2 click events:
Actual click on <label>
Click triggered on <input> by the label
The one triggered on <input> will bubble up to <label> and trigger your handler.
In the second case, Since a for attribute is specified and there is no matching input with id of 'test', the additional click is not triggered even if the input is inside the label.
Click on checkbox do click on label. Try use .change event on input
$('.label_one input').change(function(){
var html = '<div class="log_sec_one">Log</div>';
$('.logs').append(html);
});
$('.label_two input').change(function(){
var html = '<div class="log_sec_two">Log</div>';
$('.logs').append(html);
});
DEMO
Move your input outside of your label, and use the for="" attribute.
<label class="label_one" for="checkbox_one">
Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
Label Two
</label>
<input type="checkbox" id="checkbox_two"/>
<div class="logs"></div>
JSFiddle: https://jsfiddle.net/hvv6ucu8/2/
<label for="text" class="label_one">
Label One
<input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
Label Two
<input type="checkbox" name="1"/>
</label>
you forgot to put for attribute in label (label_one). just change that. it will work
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler