Take this code for Example
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
It allows a user to select one button at a time, I was always under the impression that javascript was the answer to this type of a solution. So my question is, is there any embedded javascript in the HTML radio button and if not, where is the function coming from?
Its the Browser's duty to do that for us.
Why?
Because the behavior is stated in the spec:
http://www.w3.org/TR/html/forms.html#radio-button-state-(type=radio)
Related
I guess kind of a silly question here. I have created a .html file on my desktop outside of fiddle (so please don't test it in fiddle but just create a .html file on your computer to test this). in the file I JUST have 3 radio buttons and jquery attached. However, boxes never work right as checked or clicked attribute never gets set on them and literally they don't alternate when checked on. What am I missing here?
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="well" value="well" />1 - Very well<br />
<input type="radio" name="little" value="little" />2 - A little<br />
<input type="radio" name="not" value="not" />3 - Not at all<br />
</body>
However, boxes never work right as checked or clicked attribute never gets set on them
None of the code you've supplied will set the checked attribute.
You need to actually set it, to set it:
<input type="radio" name="well" value="well" checked>
Note: Browsers remember the state of forms when refreshing the page. If you are testing by modifying the HTML and then clicking the refresh button, you may not see any effect. Click the address bar and press enter to avoid this problem.
There is no clicked attribute for the input element.
they don't alternate when checked on
They have different name attribute values. To be part of the same radio group, each radio button must share the same name.
You have three groups, each with one member.
Your radio buttons don't know they're related. The name attribute should be the same, while the value can be changed for each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rating" value="well" />1 - Very well<br />
<input type="radio" name="rating" value="little" />2 - A little<br />
<input type="radio" name="rating" value="not" />3 - Not at all<br />
In order for them to be mutually exclusive (so that when you select one, it deselects any others) all of the radio elements have to have the same name. Change your code like so and it will work:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<input type="radio" name="radio" value="well" />1 - Very well<br />
<input type="radio" name="radio" value="little" />2 - A little<br />
<input type="radio" name="radio" value="not" />3 - Not at all<br />
</body>
</html>
Simple and easy.
I got two radio buttons.
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
How do i validate in AngularJS that at least one is chosen? And how can i type something like
$scope.myForm.gender.$invalid
Any ideas?
Without a form, you can fix this by check the value of the models in your controller, returning an error if both are false. You could also go ahead and set one true by default.
But to answer your question, you can do something similar to $scope.myForm.gender.$invalid all you have to do is wrap your input tags in a form with the name myForm. So, it would like:
<form name="myForm">
<input type="radio" name="gender" ng-model="male">
<input type="radio" name="gender" ng-model="female">
</form>
Then, $scope.myForm would be able to give you certain properties, like $isPristine and properties for each input field.
Either of these ways will work though, so I help that helps!
use required :
<input type="radio" name="gender" ng-model="male" required>
<input type="radio" name="gender" ng-model="female" required>
DEMO
same Question asked here : Validate Radio Button AngularJS
I have created a validation form, this is one of the fields that you have to compile:
<input type="number" name="height" min="160" max="200"/>
but, I want to modify the minimum number if someone clicks on a radio button.
<input type="radio" name="gender" value="male">
if someone clicks here I want to set the minimum number of the height to 170
<input type="radio" name="gender" value="female">
if someone clicks here I want to set the minimum number of the height to 160
Can someone help me? :)
Try this:
<input id='height_input' type="number" name="height" min="160" max="200"/>
<input type="radio" name="gender" value="male" onclick="setmin(170)">
<input type="radio" name="gender" value="female" onclick="setmin(160)">
Then in Javascript:
function setmin(n) {
document.getElementById('height_input').min = n;
}
jQuery is totally unnecessary. No need to use a huge library for such a simple task. Remember to add the id='height_input' to your first input like I show above.
jQuery would be your best bet.
you can change the value of attributes using attr, and you can add click handlers to the two radio buttons using on or click
Here's a good resource for getting started with jQuery
I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
Don't dismiss this as a newbie question! It's not, I'm not, I've tried everything, and its a complex/convoluted environment that my code is in.
Okay - here goes. I'm adapting someone else's html/js/css code and trying to get it to work on my server (I've taken permission - please, no comments on that). The main html generates a overlaid form which has a checkbox which is unchecked that I need to mark as checked before presenting to the user.
The checkbox code is just:
<input type="checkbox" id="type" />
<label for="type" id="disable">Disable check</label>
I've tried changing the above to ALL of the following (AND doing Ctrl+F5 when trying it out on the browser):
<input type="checkbox" id="type" CHECKED/>
<input type="checkbox" id="type" checked>
<input type="checkbox" id="type" checked="checked"/>
<input type="checkbox" id="type" checked="checked" value="1"/>
<input type="checkbox" id="type" value="true" checked>
<input type="checkbox" id="type" name="tempname" checked="checked"/>
<input type="checkbox" id="type" checked=true/>
At the end of the page: <script type="text/javascript">document.getElementById("type").checked=true;</script>
The problem COULD be elsewhere - something somewhere COULD be setting it to a default value of unchecked, but (a) that's a bit unlikely, and (b) I did look at the accompanying js code but no luck on a preliminary search.
Thoughts? 'cause I'm all out... :(
It's a fairly simple question, if only because checkboxes are fairly simple things :)
If
<input type="checkbox" id="type" name="name" checked="checked"/>
doesn't work then I would strongly suggest taking a bigger dig through the javascript being loaded on the page.
Have you looked into the JavaScript to see if there is code that is marking the checkbox unchecked onclick?