This is HTML code:
<label for="like" ng-click="copyRec()">
<input type="checkbox" id="like" value="val"/>
Click
</label>
In my Angular controller:
$scope.copyRec = function() {
console.log("inside");
};
While clicked its firing twice. Can anyone help me out in solving this?
in your HTML code
<input type="checkbox" ng-click="copyRec()" id="like" value="val"/>
<label for="like" >Click</label>
Your function is firing twice because copyRec() is call on your label and on your input (checkbox).
I would suggest to move ng-click to the input only:
<label for="like">
<input type="checkbox" id="like" value="val" ng-click="copyRec()"/>
Click
</label>
Related
I have a form using a template driven form and I whant to make a radio button selected by default but it doesnt work, this is a part of my code:
<div class="donut-form-promos">
<span>Promo:</span>
<div class="donut-form-promos-choices">
<input
type="radio"
name="promo"
[value]="'newPromo'"
rquired
ngModel
#promo="ngModel"
/><span>New</span>
<input
type="radio"
name="promo"
[value]="'limitedPromo'"
required
ngModel
#promo="ngModel"
/><span>Limited</span>
<input
type="radio"
name="promo"
[value]="'clubPromo'"
required
ngModel
#promo="ngModel"
/><span>Club memeber</span>
<input
type="radio"
name="promo"
[value]="undefined"
required
ngModel
#promo="ngModel"
[checked]="'checked'"
/><span>None</span>
</div>
</div>
I upload the example in stakeblitz too , this is a link: https://stackblitz.com/edit/angular-ivy-dd8u6v?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Thank you.
Okay, so I got a custom radio button:
<label class="radiobtn" id="region">EUW
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
And I'd like to store the text next to it (EUW) into a localStorage item called "region", when the radio button is checked.
There are multiple radio buttons of this and i want to do it for all of them.
Each custom radio button has another value (EUW, EUNE, JP, KR, etc...)
Everything else is similar.
So I kinda tried to figure out how I could do that, but I couldn't came across a good solution.
Do you guys have some good solutions? :O
Thank you for any help, I appreciate it.
Cheers!
You create custom radio buttons all with same class radiobtn, then in JQuery on radiobtn class click event check if radio button is checked, get label text and store it in localStorage.
JSFiddle
https://jsfiddle.net/mLst49h8/
HTML
<label class="radiobtn" >EUW
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
<label class="radiobtn" >EUNE
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
JQuery
$( ".radiobtn" ).click(function() {
if($(this).children("input").is(":checked")) {
// alert( $(this).text());
var region = $(this).text();
localStorage.setItem("region", region);
region = localStorage.getItem("region");
alert(region);
}
});
I tried to design a form, which is now to complicated for me to describe so I created a fiddle: http://jsfiddle.net/tLh72acj/
I think this shows my problem: I can't access the radio-input:
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<input type="radio" name="bestellart" value="vor" id="vor" checked />
<label for="vor">CAN'T</label>
<input type="radio" name="bestellart" value="eil" id="eil" />
<label for="eil">TOUCH</label>
<input type="radio" name="bestellart" value="ewg" id="ewg" />
<label for="ewg">THIS!</label>
</fieldset>
I want to control the radio buttons when I click on them, but if I click on any other place inside the collapsible I want it to open (but not if I use the radio buttons). How do I have to handle this?
Is that what you want ?
JsFiddle
if ($(this).closest(".ui-collapsible").hasClass('ui-collapsible-collapsed')){
$(this).closest(".ui-collapsible").collapsible({collapsed: false});
}
else{
$(this).closest(".ui-collapsible").collapsible({collapsed: true});
}
Here is an update with comments : JsFiddle
How would i add the "value" that are selected from radio boxes in html forms? So when someone selects an option it would add the other "values" onto it and total that it at the bottom of the page. And does anyone know if it could add "names" total "values" onto it as well? thanks
My code looks like this:
<h3><u>Title</u></h3><br>
<form action="">
<input type="radio" name="num" value="0">Text<br>
<input type="radio" name="num" value="2">Text<br>
<input type="radio" name="num" value="80">Text<br>
<input type="radio" name="num" value="110">Text<br>
<input type="radio" name="num" value="85">Text<br>
<input type="radio" name="num" value="120">Text<br>
</form>
You cannot. By definition, a set of radio buttons with the same name attribute contributes at most one value to the data set, the one corresponding to the selected button.
If you want something else, you should handle that server side, or use other types of controls, or redesign the entire approach.
Working example :
(using a Javascript library, jQuery, but could be done in plain JavaScript)
You mainly have to change your inputs to type="checkbox" in the HTML
What code does : when a checkbox's state is modified, all checked checkboxes' value are summed up in the last input field I've added
The checkboxes are targetted by looking for "num" in their name, if you remove that the checkbox won't be taken into account by the script.
$(function() {
$("input[name*='num']").on("change", function() {
var total = 0;
$("input[type='checkbox']:checked").each(function() {
total += Number($(this).val());
});
$("#total").val(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>
<u>Title</u>
</h3>
<br>
<form action="">
<input type="checkbox" name="num0" value="0">Add 0<br>
<input type="checkbox" name="num2" value="2">Add 2<br>
<input type="checkbox" name="num80" value="80">Add 80<br>
<input type="checkbox" name="num110" value="110">Add 110<br>
<input type="checkbox" name="num85" value="85">Add 85<br>
<input type="checkbox" name="numwhateveryoulike" value="120">Add 120<br>
Total <input type="text" value="0" id="total">
</form>
I'm trying to come up with a form comprised of radio buttons group where a user must select one of the options and if he doesn't there's a custom validity message.
So the logic will be:
A user forgets to select an option and the validity message shows up.
He goes back and selects any option to go proceed.
The problem is, the way things are it only goes ahead if the selected option is the one with the onclick event as shown below. If it isn't then the message will keep showing up.
I have tried to juggle around with the required, oninvalid and onclick thingies but to no avail. Any ideas?
Thanks!
<form>
<input type="radio" name="test" value="0" required oninvalid="this.setCustomValidity('Click me')" onclick="setCustomValidity('')">Zero<br>
<input type="radio" name="test" value="1" class="wrapper">One<br>
<input type="radio" name="test" value="2" class="wrapper">Two<br>
<input type="submit">
</form>
<form>
<input type="radio" id="test" name="test" value="0" oninvalid="this.setCustomValidity('Click me')" onclick="clearValidity();" required >Zero<br>
<input type="radio" name="test" value="1" onclick="clearValidity()" class="wrapper">One<br>
<input type="radio" name="test" value="2" onclick="clearValidity()" class="wrapper">Two<br>
<input type="submit">
</form>
<script>
function clearValidity()
{
document.getElementById('test').setCustomValidity('');
}
</script>
This can be written as a function to make it work on any type of <input>:
document.querySelectorAll('form *[data-custom-validity]').forEach(el => {
const firstInput = el.querySelector('input:first-of-type')
// set custom validity if first input is invalid
firstInput.addEventListener('invalid', () => firstInput.setCustomValidity(el.dataset.customValidity))
// listen on all inputs for a change
el.querySelectorAll('input').forEach(input =>
input.addEventListener('change', () => firstInput.setCustomValidity('')))
})
<form>
<div data-custom-validity="Click me.">
<input type="radio">
<input type="radio">
</div>
</form>
This worked for me, I'm leaving it here in case it helps anyone.
<div class="genero">
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="M">Masculino
<input type="radio" name="radiogroup" oninvalid="setCustomValidity('Mensaje')" onchange="try{setCustomValidity('')}catch(e){}" value="F">Femenino
</div>