I'm currently getting some weird functionality with radio buttons and forms.
Basically I have a form with 4 radio buttons. Right now: When I click a radio button it is permanently enabled. I can thus have all 4 options selected. Clicking the option does not deselect the radio option.
I would like it to switch between the options, so I can only have 1 option selected at a time. What am I missing?
my Code:
<form [formGroup]="answer" (submit)="saveAnswer()">
<input formControlName="answer" id="option1" type="radio" />
<input formControlName="answer2" id="option2" type="radio" />
<input formControlName="answer3" id="option3" type="radio" />
<input formControlName="answer4" id="option4" type="radio" />
<button type="submit">Submit</button>
</form>
constructor(
private movieService: MovieService,
private formBuilder: FormBuilder
) {
this.answer = this.formBuilder.group({
'answer': '',
'answer2': '',
'answer3': '',
'answer4': ''
});
}
If you want radio buttons that are "grouped" together (so you can select only one of them) you should give all of them the same name:
<form [formGroup]="answer" (submit)="saveAnswer()">
<input formControlName="answer" value="answer1" id="option1" type="radio" />
<input formControlName="answer" value="answer2" id="option2" type="radio" />
<input formControlName="answer" value="answer3" id="option3" type="radio" />
<input formControlName="answer" value="answer4" id="option4" type="radio" />
<button type="submit">Submit</button>
</form>
You can distinct between them using their value
Related
In my html page, I cant add two radio buttons, I get an error in free-code-camp and that is about to have two radio buttons in label element with attribute of same name value for both of them in input self-closing tag.
I tried the same value for name attribute in input tag within the label element. but I got error.
<label>
<input id="indoor" type="radio" name="indoor-outdoor" > Indoor
</label>
<label>
<input id="outdoor" type="radio" name="indoor-outdoor" > Outdoor
</label>
The following example shows three radio buttons with the same name, within a label, within a form.
This is a valid structure.
const handleSubmission = (form, event) => {
event.preventDefault();
console.log(`Choice: ${form.elements.foo.value}`);
};
<form onSubmit="handleSubmission(this, event)">
<label>
<strong>Choice:</strong>
<input type="radio" name="foo" value="a" /> A
<input type="radio" name="foo" value="b" /> B
<input type="radio" name="foo" value="c" /> C
</label>
<button type="submit">Submit</button>
</form>
$(document).ready(function(){
$('#update2').click(function(){
var checkboxes = $('input[name="checkbox1"], input[name="checkbox2"]');
checkboxes.on("change", function(e){
checkboxes[0].setCustomValidity(checkboxes.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
$(document).ready(function(){
$('#select2').click(function(){
var checkboxes2 = $('input[name="choose1"], input[name="choose2"]');
checkboxes2.on("change", function(e){
checkboxes2[0].setCustomValidity(checkboxes2.filter(":checked").length ? '' : 'please select at least one option to procees')
}).change
});
});
<form>
<input type="radio" id="update" name="update-button" value="1">
<input type="radio" id="update2" name"update-button" value="2">
<input type="checkbox" id="check1" name="checkbox1" value="3">
<input type="checkbox" id="check2" name="checkbox2" value="4">
<input type="submit" name="submit-button">
</form>
<form>
<input type="radio" id="select" name="select-button" value="10">
<input type="radio" id="select2" name"select-button" value="11">
<input type="checkbox" id="box1" name="choose1" value="12">
<input type="checkbox" id="box2" name="choose2" value="13">
<input type="submit" name="submit-select">
</form>
Im trying to set custom validation to the checkboxes. so when i select the radio button with the id "select2", the checkboxes with diffrent name "choose1" and "choose2" one of them is required before submitting the form. it is working perfieclty in the first example with "update2" and "checkbox1","checkbox2" checkboxes. but i have no idea why it is not working in the second example with the "select2" and "choose1", "choose2" checkboxes.
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>
My form is currently set up to gather all the input data to my autoresponder...however, I made the form with only one option - pay now. Users would like options, so Im thinking of giving them 2 choices, the old "pay now" COD method, and option#2 paypal. I think radio buttons are the best way for doing this. However I cant get them to work separately...when I choose option 2, option 1 remains selected. So I added the radio buttons myself after the ordernow button.
<p>mail: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__email" name="mail" class="mj" ></input>
</label>
</p>
<p>name: *</p>
<p>
<label>
<input type="text" class="wf-input wf-req wf-valid__required" name="name" class="mj" ></input>
</label>
</p>
<p>
<input type="submit" value="ORDER NOW" class="butt">
<div class="selectpaymentradios">
<label class="radio" >select payment</label>
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
</div>
<input type="hidden" name="webform_id" value="12x45"/>
</p>
</form>
<script type="text/javascript" src="http://xyz.com/view_webform.js?wid=12x45&mg_param1=1"></script>
Im trying to figure out how can I make this work with my autoresponder, I think this form has to be able to tell me what kind of payment did the customer chose...but the autoresponders form creator doesnt have radio buttons at all so Im stuck, I dont know if its possible...
<input class="radio" type="radio" name="cash" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="ppal" value="ppal" /> <span>PaypaL</span>
the problem you hit, is very simple - you have to use the same name for all radio-buttons, where only one item should be selected. like this:
<input class="radio" type="radio" name="payment" value="cash" checked /> <span>Ca$h</span>
<input class="radio" type="radio" name="payment" value="ppal" /> <span>PaypaL</span>
The name attribute should be the same for both radio buttons:
<input class="radio" type="radio" name="method" value="cash" checked="checked" /> <span>Ca$h</span>
<input class="radio" type="radio" name="method" value="ppal" /> <span>PaypaL</span>
Also, if you are closing input tags, you are probably worried about XHTML validation. So instead of just checked you should type checked="checked".
I have two radio buttons. I want one of them to be shown as selected when the page loads. Which property I should use, and how?
Example:
<input type="radio" name="musictype2" value="rock" default> Rock<br>
<input type="radio" name="musictype2" value="alternative"> Alternative<br>
<input type="radio" name="test" value="2" checked="checked" />test
like this?
<input type="radio" name="genreselect" value="rock" checked="checked" />
<input type="radio" name="genreselect" value="alternative" />
In this case "rock" is preselected.
<form>
<input type="radio" name="genre" value="rock" checked /> Rock<br />
<input type="radio" name="genre" value="alternative" /> Alternative
</form>
This is the correct way. The name attribute needs to be the same in order for them to switch between.
Check it here.
This is how you use the checked attribute:
<input type=radio name="my_name" VALUE="my_value" checked />