Kindly Select the service you require
<input type="radio" id="currConverter" name="currConverter" value="currConverter" />
<label for="currConverter">Currency Converter</label> <br />
<input type="radio" id="pbChecker" name="pbChecker" value="pbChecker" />
<label for="pbChecker">Prize Bond Checker</label> <br />
<input type="submit" class="submit" />
</form>
I have a form element inside which i have put two radio buttons but want the user to select only one option.When i am clicking on these one by one , both options are getting selected instead of the one on which i clicked.Any solution to this ?
Link to w3School
You have to keep same name. in your case:
<input type="radio" id="currConverter" name="pbChecker"value="currConverter"/>
<label for="currConverter">Currency Converter</label> <br />
<input type="radio" id="pbChecker" name="pbChecker" value="pbChecker" />
<label for="pbChecker">Prize Bond Checker</label> <br />
<input type="submit" class="submit" />
</form>
Related
I'm having some issues trying to find the best course of action to block a form submission from going through if the answer to a yes/no question or at least give an error message properly.
First attempt was simply adding required="true" to the "No" button:
<th valign="top" align="left">
<label for="yesOrNo">
<strong>Are you a bad guy?</strong>
<br />
<br />
</label>
</th>
<td valign="top">
<label>
<input type="radio" name="yesOrNo" id="yesOrNo" value="yes" />Yes</label>
<br />
<label>
<input type="radio" name="yesOrNo" id="yesOrNo" required="true" value="no" />No</label>
<br />
<br />
</td>
</tr>
Then after that didn't work fully with "yes" still being valid for submission I tried making a hidden field that's required through angular which worked for me in the past. Granted this worked for a text field and numbers, I took an estimate on what to use in the case of a yes-no radio button:
<th valign="top" align="left">
<div ng-if="angularYesOrNo=true">You are uneligible for this promotion</div>
<label for="yesOrNo"><strong>Are you a bad guy?</strong>
<br />
<br />
</label>
</th>
<td valign="top">
<label>
<input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo" value="yes" />Yes</label>
<br />
<label>
<input type="radio" name="yesOrNo" id="yesOrNo" value="no" />No</label>
<input type="hidden" name="badGuyFlag" id="badGuyFlag" ng-required='angularYesOrNo=true' />
<br />
<br />
</td>
</tr>
Is there anything in either code that I would need to change to make this work? Or is there any functions I would need to add in a separate script tag? This has been racking my brain all afternoon.
Working Plunker
It looks like you need to define your variable in your Angular Javascript file like this:
Javascript
$scope.angularYesOrNo = {bad:undefined};
Your ng-if statement needs two equal signs to evalute your angularYesOrNo variable.
Html
<div valign="top" align="left">
<div ng-if="angularYesOrNo.bad=='Yes' ">You are uneligible for this promotion</div>
<label for="yesOrNo"><strong>Are you a bad guy?</strong>
<br />
<br />
</label>
</div>
<div valign="top">
<label>
<input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo" value="Yes" />
Yes
</label>
<br />
<label>
<input type="radio" name="yesOrNo" ng-model="angularYesOrNo.bad" id="yesOrNo" value="No" />
No
</label>
<br />
<br />
</div>
You can use ng-submit on the form to set a submit handler which validates the form data before it is submitted.
<form name="myForm" novalidate ng-submit="processSubmit()">
<label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo" value="yes" /> Yes</label><br />
<label><input type="radio" name="yesOrNo" ng-model="angularYesOrNo" id="yesOrNo" value="no" /> No</label><br />
In your controller define the function.
$scope.angularYesOrNo = '';
$scope.processSubmit = function() {
if ($scope.angularYesOrNo == '' || $scope.angularYesOrNo == 'Yes') {
// the form should not be submitted
} else {
// process the form (submit or ajax)
}
};
And if you want to trigger the form submit from the controller see https://stackoverflow.com/a/25102791/5509627
I have the following code of inputs
<div id="especiality">
<input type="radio" class="rad" name="Item1" value="Item1" />Publicidad
<br />
<input type="radio" class="rad" name="Item2" value="Item2" />Editorial
<br />
<input type="radio" class="rad" name="Item3" value="Item3" />Identidad Corporativa
<br />
<input type="radio" class="rad" name="Item4" value="Item4" />Web
<br />
<input type="radio" class="rad" name="Item5" value="Item5" />Empaques
<br />
<input type="radio" class="rad" name="Item6" value="Item6" />Tipografía
<br />
<input type="radio" class="rad" name="Item7" value="Item7" />Fotografía
<br />
<input type="radio" class="rad" name="Item8" value="Item8" />Señalética
<br />
<input type="radio" class="rad" name="Item9" value="Item9" />Animación
<br />
<input type="radio" class="rad" name="Item10" value="Item10" />Ilustración
<br />
</div>
That works with this script
<script>
$(document).ready(function () {
$("#button").click(function () {
// Radios
$(".rad:checked").each(function() {
console.log("Radio: " + $(this).val());
});
});
})
</script>
It works for select multiples options and thats ok but it doesn't when it comes to deselect the option. Any solutions?
Thanks
Selector for unchecked items would be:
$(".rad:not(:checked)").each(function() {
Radio buttons are designed to let you select exactly one out of a group. You can start a group with zero selected (by omitting the checked attribute from all of them) but there isn't a clean way to go back to that state.
To group radio buttons, give them all the same name.
If you want to select zero or more from a group, you should be using checkboxes, not radio buttons.
This is the code i use for my form and I'm using radio button as i know only one can be ticked but for some reason I can click on multiple. How do I fix this?
<form name="Question1" method="post" onsubmit="return CheckAnswer1()">
<input type="radio"
name="Q1opt1"
value="1" >Having loads of pictures on the website<br /><br />
<input type="radio"
name="Q1opt2"
value="2" >Making the website nice and pretty.<br /><br />
<input type="radio"
name="Q1opt3"
value="3" >Making the website most user friendly.<br /><br />
<input type="submit" value="Select Your Answer and Click Here" />
</form>
They should have the same name but different values, that's how the browser distinguishes between sets of radio button groups:
<form name="Question1" method="post" onsubmit="return CheckAnswer1()">
<input type="radio"
name="Q1opt"
value="1" >Having loads of pictures on the website<br /><br />
<input type="radio"
name="Q1opt"
value="2" >Making the website nice and pretty.<br /><br />
<input type="radio"
name="Q1opt"
value="3" >Making the website most user friendly.<br /><br />
<input type="submit" value="Select Your Answer and Click Here" />
</form>
It's because their names are all the same.
Try this:
<input type='radio' name='Qstn1' Id='q1Opt1' value='1' />Opt 1<br />
<input type='radio' name='Qstn1' Id='q1Opt2' value='2' />Opt 2<br />
<input type='radio' name='Qstn1' Id='q1Opt3' value='3' />Opt 3<br />
Hi I'm trying to align two set of checkboxes in form side by side and make the checkboxes align nicely but everytime I get the checkboxes side by side the one on the right will be mess up depend on the text size on the left
so I'm wondering if there is a way
here is the code
UPDATE THE BROKEN CODE.
http://jsfiddle.net/Ysf7t/1/
Easiest way would be to give the names (i.e. "Soccer", "Mercedes", etc.) a fixed width through CSS.
Basically something like this:
<h1>Sports</h1>
<div>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Soccer</span>
<input type='checkbox' name='system_type17' value='2' />
<input type="checkbox" name="system_type3" value="5" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
<div>
<input type='checkbox' name='system_type18' value='3' />
<input type='checkbox' name='system_type4' value='4' />
<span style="width:100px;display:inline-block;">Mercedes</span>
<input type="checkbox" name="system_type7" value="2" />
<input type="checkbox" name="system_type8" value="3" />
<span style="width:100px;display:inline-block;">Mercedes</span>
</div>
Of course, ideally, the CSS shouldn't be inline. But I hope you get what I mean.
How can I identify which radio button is accepted?
How do I prevent a user being able to select multiple options when I use radio buttons?
<input type='radio' name='one'>option1<br />
<input type='radio' name='two'>option2<br />
<input type='radio' name='three'>option3<br />
<input type='radio' name='four'>option4<br />
<input type='radio' name='five'>option5<br />
Thats the code I use, thanks for reading.
You need to use the "name" attribute to tie them all together, use the value attribute to give them different values.
<input type="radio" name="number" value="one" /> One<br />
<input type="radio" name="number" value="two" /> Two<br />
<input type="radio" name="number" value="three" /> Three<br />
Think of name as last name... For example, if you had Bart, Lisa, Homer, Marge and Maggie, the name would be their last name: Simpson, the value would be the said names:
<input type="radio" name="Simpson" value="Bart" /> Bart<br />
<input type="radio" name="Simpson" value="Lisa" /> Lisa<br />
<input type="radio" name="Simpson" value="Marge" /> Marge<br />
<input type="radio" name="Simpson" value="Homer" /> Homer<br />
<input type="radio" name="Simpson" value="Maggie" /> Maggie<br />
you should give them the same name
Also the order of name/value pair matter's I guess.Name should appear before the order
I know! Do like this:
<label><input type="radio" name="a">1</label>
<label><input type="radio" name="a">2</label>
<label><input type="radio" name="a">3</label>
Give everything same value for 'name' attribute. You add the name for the radio buttons