How to prevent multiple select in radio button? - javascript

I've this code:
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" ng-model="selected" ng-value="true"> Red
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Green
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Blue
</label>
<br/>
<label>
<input type="radio" ng-model="selected" ng-value="false"> Yellow
</label>
<br/>
<input type="submit" id="submit" value="Submit" />
</form>
How do I prevent ALL of the false values from being selected at once if I click one?

<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" ng-model="selected" ng-value="red">
Red
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="green">
Green
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="blue">
Blue
</label><br/>
<label>
<input type="radio" ng-model="selected" ng-value="yellow">
Yellow
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>
Give each of the radio buttons a distinct value.

As per my understanding you want to group the radio buttons such that one is selected at a time you can do it by adding name attribute in each radio button and give same name to all of them. So at time of submit you can get the value of selected variable in submit function call.
<form name="quiz" ng-submit="quiz.answer(selected)">
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="true">
Red
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Green
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Blue
</label><br/>
<label>
<input type="radio" name="quizOption" ng-model="selected" ng-value="false">
Yellow
</label><br/>
<input type="submit" id="submit" value="Submit" />
</form>

Related

I am trying to create a rating system in html/js and i cant log more than one review [duplicate]

Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.

why I can select multiple radio buttons in this form?

I have two forms
only one of them is working probably "example 2"
and both of them are almost the same in terms of functionality
"example 1" is the one in question , "example 2" works fine.
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice_radio_0" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice_radio_1" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice_radio_2" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here"></button>
</form>
<h4>example 2<h4/>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
here is the code in codepen : https://codepen.io/anon/pen/zbOOMM?editors=1010
*"example 1" was created by a dynamic java script "example 2" found online*
Because radio buttons are grouped according to them having the same name, but your radio buttons all have different names. To make a group of radio buttons, give them all the same name attribute.
(Side note: You usually don't need an id attribute on radio button elements, but if you do have one, it doesn't have to be the same as its name.)
Here they are with the same name:
<h4>example 1<h4/>
<form class="answerFormClass" action="http://127.0.0.1:5000" method="PSOT" >
<div name="choiceDivName_0" id="choiceDivId_0">
<input type="radio" name="choice" id="choiceId_radio_0" value="get">
<label for="choiceId_radio_0">get</label>
</div>
<div name="choiceDivName_1" id="choiceDivId_1">
<input type="radio" name="choice" id="choiceId_radio_1" value="give">
<label for="choiceId_radio_1">give</label>
</div>
<div name="choiceDivName_2" id="choiceDivId_2">
<input type="radio" name="choice" id="choiceId_radio_2" value="gone">
<label for="choiceId_radio_2">gone</label>
</div>
<input type="submit" name="submitBtnName" id="submitBtnid" value="CLick here">
</form>

Clicked state; styling on groups of form controls

I have a group of radio controls in a form. Each one is wrapped in a <label> element for styling.
When the page loads, each label has a background color set on it via CSS.
I want a user to be able to click on any radio button from the group toggling it's parent <label> background color.
From a UX point of view, I need each checked control to have it's parent label background color toggled. I need this throughout the group of radio controls.
<form>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
My approach;
I'm aware one cant select a parent element using CSS so it's off to jQuery.
Using jQuery, I can apply some logic to the entire set of radio buttons like so:
$(':radio').each( function (i, el) {
$(this).on('change', function(){
if($(this).is(':checked')){
$(this).parent().css('background', '#ba9bc9');
}
$(this).on('blur', function(){
$(this).parent().css('background', '#09afed');
});
});
});
This works, however it only works for the current element selected. Clicking away loses focus. I need it to maintain state throughout the entire set of questions. So questions #1 - #3 could all end up with coloured backgrounds potentially.
You can find the radios with the same name, and remove the class from them, before adding the class to the radio that was clicked.
var $radios = $(':radio');
$radios.on('click', function(e){
$radios.filter('[name="'+ e.target.name +'"]').not(e.target).parent().removeClass('selected');
$(e.target).parent().addClass('selected');
});
.selected {
background-color: red; //or whatever
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question1">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question2">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
<label>
<input type="radio" name="question3">
</label>
If you are able and willing to refacter your code you can do this purely with css:
label {
background: #ccc;
}
[type="radio"]:checked+label {
background: #b00;
}
<form>
<input id="lbl01" type="radio" name="question1">
<label for="lbl01">01</label>
<input id="lbl02" type="radio" name="question1">
<label for="lbl02">02</label>
<input id="lbl03" type="radio" name="question1">
<label for="lbl03">03</label>
<br/>
<input id="lbl04" type="radio" name="question2">
<label for="lbl04">04</label>
<input id="lbl05" type="radio" name="question2">
<label for="lbl05">05</label>
<input id="lbl06" type="radio" name="question2">
<label for="lbl06">06</label>
<br/>
<input id="lbl07" type="radio" name="question3">
<label for="lbl07">07</label>
<input id="lbl08" type="radio" name="question3">
<label for="lbl08">08</label>
<input id="lbl09" type="radio" name="question3">
<label for="lbl09">09</label>
</form>

Change input text on radio button selection different forms

I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks
Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>
The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});
$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});
Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});
Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}

select two radio buttons with the same name, id, value

On my page I have two radio buttons for yes and two for no.
How I can do it if I check yes in one place it check second yes button or if I check no the second no will check too.
Following is my code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
how i can select two radios at the same time?
You can't have more than one button checked in the same radio group. You need to give the two sets different names. I used search_by_range_A and search_by_range_B. Also IDs have to be unix.
To make it automatically check the other button, use a .change() handler that gets the value and then selects the other checkbox with the same value and checks it.
$(":radio").change(function() {
var value = $(this).val();
$(":radio[value=" + value + "]").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<input checked="checked" id="search_by_range_A_no" name="search_by_range_A" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_A_yes" name="search_by_range_A" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_B_no" name="search_by_range_B" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_B_yes" name="search_by_range_B" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
And again...ID of every element on a webpage should be Unique!
Use classes instead.
But nevertheless, it is still possible to achieve that. The only thing you have to change in your code is the name of the radio button because all radio buttons with the same name are assumed to be a group, and the web-browser only allows selection of only one of them by default, and you cannot control that.
Therefore change the name to regroup the radio buttons into two different sets.
Then you can do this:
$("[id^='search_by_range']").change(function(){
$("[id='"+$(this).attr("id")+"']").prop("checked", "checked");
});
Here is the JSFiddle demo
you can use javascript for this problem
here i can give you hint how can you can do !
$('#search_by_range_yes').attr('checked','checked');
$('#search_by_range_yes').addAttr('checked');
this would help :)
thanks
In same group radio buttons you can't check more than one. I used two different groups for this.
Find the below code:
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_range" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_range_second" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range_second" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>
JS Code:
$(function() {
$(":radio").on("change", function() {
var val = $(this).val(), checked = this.checked;
var others = $(":radio[value='"+val+"']").not(this);
others.prop('checked', true);
});
});
You can find the working demo here: http://jsfiddle.net/26g5rxs6/
1.i understand your problem these happens because all radio button has same name.
2.Same name radio button has one group and select only in that group.
3.You can group radio button by 1. search by no 2. search by range. i updated your code by following code.
<fieldset>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size10" name="size10" type="text" value="27">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size1" name="size1" type="text" value="15 - 150">
<br>
<input checked="checked" id="search_by_range_no" name="search_by_no" type="radio" value="no">
<input class="input-long" id="size20" name="size20" type="text" value="65">
<br>
<input id="search_by_range_yes" name="search_by_range" type="radio" value="yes">
<input class="input-long" id="size2" name="size2" type="text" value="25 - 250">
<br>
</fieldset>

Categories

Resources