why I can select multiple radio buttons in this form? - javascript

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>

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.

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

How to prevent multiple select in radio button?

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>

Radio button clicked with label

I have multiple radio buttons. In the code that i have they are different pictures corresponding with different functions.
The user has to know which radio button is clicked. Therefor i'm trying to find a way to change the background of the radio button after it has been clicked.
In order for the code to work the <label> has to stay arround the <input> tag.
<div class="radio-toolbar">
<label class="BottomLeft">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomLeft" />
</label>
<label class="BottomRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="BottomRight" />
</label>
<label class="Dual">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Dual" />
</label>
<label class="DualRight">
<input id="tech" type="radio" ng-model="SelectedLayout" value="DualRight" />
</label>
<label class="Duplex">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Duplex" />
</label>
<label class="Custom">
<input id="tech" type="radio" ng-model="SelectedLayout" value="Custom" />
</label>
</div>
Here's the JSfiddle
You can try this:
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});
Here is the FIDDLE.
Also, you must have unique ID's in html.
To work your labels , your code should look like this.The problem is that , you cannot have same ID for all elements. ID is unique and if you want to work with label , you have to put for="#" attribute in your <label></label> element.So , remember <label></label> goes with for="" attribute , and that for="" attribute works with the id in the <input /> tag.And I've made your radio buttons non-multiple , so remove name="" attribute to work as multiple.
<div class="radio-toolbar">
<label for="first">
Tech<input id="first" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomLeft" />
</label>
<label for="second">
AnotherOne<input id="second" type="radio" ng-model="SelectedLayout" name="radioButton" value="BottomRight" />
</label>
<label for="third">
Third<input id="third" type="radio" ng-model="SelectedLayout" name="radioButton" value="Dual" />
</label>
<label for="fourth">
Fourth<input id="fourth" type="radio" ng-model="SelectedLayout" name="radioButton" value="DualRight" />
</label>
<label for="fifth">
Fifth<input id="fifth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Duplex" />
</label>
<label for="sixth">
Sixth<input id="sixth" type="radio" ng-model="SelectedLayout" name="radioButton" value="Custom" />
</label>
</div>
Try this.I have changed backgorund color checked radio button to orange with jquery
$('input[type=radio]')
.on('click', function() {
var $label = $(this).closest('label');
$('label').not($label).css('background-color', 'green');
$label.css('background-color', '#2C8BDE');
});

Generate a number for a form selected state

I am working on a product configurator with interdependencies and many options. I'm looking for a solution how to restore the selected state for the form without saving data on the server.
My idea:
the customer makes his choice with checkboxes and radio button on
the website (simple example: http://jsfiddle.net/benroe/6JRAm/5/)
customer print out the custom product with a short number at the
bottom ("configuration number")
the employee in the store types in the "configuration number" on the
website and same selected state (checkbox and radio button) are selected
But how to generate a short number for every possible unique states?
Simple example for the form:
<h1>Product Configurator</h1>
<form>
<p>
<label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
</p>
<p>
<label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
</p>
<p>
<label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
</p>
<p><input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"></p>
</form>
<p>Configuration Number: <input type="text"></p>
Something like this? but adding the customer id:
http://jsfiddle.net/6JRAm/23/
$('#saveForm').click(function() {
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
return $(this).val();
}).get().join('-');
alert(configuration);
});

Categories

Resources