Just like what you see in the picture, the default section is the default view that I have in a form. The appended view will get displayed based on the ajax request.
I'm trying to make the radio button to be able to reflect with each other when either from default or appended view get selected. Example like when I select Yes from Default then the Appended View also will auto update to Yes. Then from Appended View to select No it will reflect the Default to No as well.
Please check on this link for my code and do testing
https://codepen.io/terrer-sandman/pen/WNwbPMv?editors=1010
Try with this:
function autoSelect(id, value) {
$('input[type=radio][data-id='+id+'][value='+value+']').click();
}
$('.can_claim_default').on('change', function(){
autoSelect($(this).data('id'), $(this).val());
})
$('#receipt-inline-view').on('change', 'input[name="can_claim"]', function(){
autoSelect($(this).data('id'), $(this).val());
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div style="padding: 15px;">
<!-- You can remove the "50002" from names and classes if you want -->
<p>Default</p>
<div>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" checked="" value="0">No Status
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="2">No
</label>
</div>
<br /><br />
<p>Appended View</p>
<div id="receipt-inline-view">
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" checked="" value="0">No Status
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="1">Yes
</label>
<label class="radio-inline">
<input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="2">No
</label>
</div>
</div>
Related
I want to add a custom validation message to my radio buttons group that I have.
It works fine in the below conditions:
If I select the second radio button "female" and click on submit.
If I select the first radio button "male" and click on submit.
If I do not select any radio button and click on submit, it shows me the validation message. On selecting the first radio button and clicking submit, the form is submitted.
It does not work in the below condition:
If I click on submit without checking any radio button, it shows me the validation message. After that if I select the second radio button "female" and click on submit, it still shows me the validation message on the first radio button "male".
Below is the code I have written
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<div class="container">
<form id="myForm">
<div class="row">
<input type="radio" name="gender" value="male" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" value="female" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<label for="female">Female</label>
<br>
</div>
<div class="row">
<div class="col">
<input class="submit_button" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</body>
</html>
I know this custom validation issue can be fixed by writing a function in javascript/jquery. But I would like to know if there is a way to do this inline or if there is any documentation that states it cannot be done.
Note : If I do not put the custom validation code oninvalid="this.setCustomValidity('Please select your gender')" oninput="this.setCustomValidity('')". All the conditions work correctly.
You can do this.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="overlay">
</div>
<div class="container">
<form id="myForm">
<div class="row">
<input type="radio" name="gender" id="gender" value="male">
<label for="male">Male</label>
<br>
<input type="radio" name="gender" id="gender" value="female">
<label for="female">Female</label>
<br>
</div>
<div class="row">
<div class="col">
<input class="submit_button" type="submit" value="Submit" onClick="ValidateForm(this.form)">
</div>
</div>
</form>
</div>
<script type="text/javascript">
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) )
{
alert ( "Please select your gender" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
</body>
</html>
Your code:
<input type="radio" name="gender" value="male" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<input type="radio" name="gender" value="female" required
oninvalid="this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
try this instead (no JS technically):
<input type="radio" name="gender" value="male" required
oninvalid="if(!document.querySelector('input[name=\'gender\'][checked=true]').length >= 1)this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
<input type="radio" name="gender" value="female" required
oninvalid="if(!document.querySelector('input[name=\'gender\'][checked=true]').length >= 1)this.setCustomValidity('Please select your gender')"
oninput="this.setCustomValidity('')">
Working link
I'm trying to figure out how to only allow one of two radio buttons to be checked in a form where the two radio buttons don't share the same name. I've been experimenting for hours now, but can't figure it out. Here is what I have currently:
$("#theForm").click(function(){
//alert('You clicked radio!');
if($('input:radio:checked')){
$('input:radio:checked').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
Here's a Fiddle: https://jsfiddle.net/Codewalker/reh0mzs3/1/
the click function will give you an event. you can target the event.target.name to see which radio button was clicked on and then do a simple if statement to uncheck the other radio button
$("#theForm").click(function(){
if(event.target.name == 'topic'){
$('#all').prop("checked", false);
}else{
$('#topic').prop("checked", false);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="theForm">
<form class="type">
<input type="radio" id="topic" name="topic" value="on" checked>
<input type="radio" id="all" name="all" value="on">
</form>
</div>
This should work:
<div> <input type="radio" id="contactChoice1" name="contact" value="email">
<label for="contactChoice1">Email</label>
<input type="radio" id="contactChoice2" name="contact" value="phone">
<label for="contactChoice2">Phone</label>
<input type="radio" id="contactChoice3" name="contact" value="message">
<label for="contactChoice3">Message</label> </div>
I would like to use these funky radio buttons though the radio buttons have an id=radio1, id=radio2, id=radio3 etc
I would like all of them to have id-radio1 so it writes the result to radio1 in the database:
Here is how I have normal radio buttons working in the past using the same id and they toggle between one another:
<div class="form-group col-md-12">
<label class="control-label form-check-inline">Gender</label>*
<div class="form-group">
<input type="radio" id="Gender" name="Gender" value="M" required="required" /><label class="control-label">Male</label>
<input type="radio" id="Gender" name="Gender" value="F" required="required" /><label class="control-label">Female</label>
</div>
</div>
$Gender=$_POST["Gender"];
INSERT INTO [dbo].[SubmissionsTBL]
[Gender]
VALUES
(,'".trimText($Gender)."')
Though, with the funky radio buttons chaning from this:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
to this doesn't work - it doesn't allow me to toggle radio buttons:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio" id="radio1"/>
<label for="radio2">Female</label>
</div>
</div>
What is stopping the toggle?
Thank you!
TL;DR: Due to the id and name attribute having the same value in your first example, I believe you may be confusing the two. With the database communication code you put up, it's grabbing the name="Gender" and not the id="Gender".
Additional information about id and class though you might find useful as an internet programmer:
The id attribute can only apply to one element per HTML document. I would suggest using the class attribute instead. The main difference between and id and a class is that a class can be applied to multiple elements.
Here is a working solution to the code you provided:
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" class="radio_grp1"/>
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2" class="radio_grp1"/>
<label for="radio2">Female</label>
</div>
</div>
I used the class .radio_grp1 as the name so that you know that you're referring to a group of radio buttons rather than just one.
Moreover, if you're using a library like bootstrap, it's very common that an element will already have an assigned class. To solve this issue, you can assign a single element multiple classes by adding a space in the string following the class attribute like so:
<input type="radio" name="radio" id="radio2" class="radio radio_grp1"/>
Hope this was useful!
Your code should be changed to something like this. the radio button's name is what is submitted to the back end, and the id is used for front-end things like label association.
id's should always be unique.
<div class="funkyradio">
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio1" />
<label for="radio1">Male</label>
</div>
<div class="funkyradio-primary col-md-6">
<input type="radio" name="radio1" id="radio2"/>
<label for="radio2">Female</label>
</div>
</div>
If by toggling, you mean the normal behavior of radio buttons, then that happens whenever all the radio buttons in the group have the same name.
**HTML**
<li class="option">
<input type="radio" name="Answer1" value="A">A</input><br>
<input type="radio" name="Answer1" value="B">B</input><br>
<input type="radio" name="Answer1" value="C">C</input><br>
<input type="radio" name="Answer1" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer2" value="A">A</input><br>
<input type="radio" name="Answer2" value="B">B</input><br>
<input type="radio" name="Answer2" value="C">C</input><br>
<input type="radio" name="Answer2" value="D">D</input><br>
</li>
<li class="option">
<input type="radio" name="Answer3" value="A">A</input><br>
<input type="radio" name="Answer3" value="B">B</input><br>
<input type="radio" name="Answer3" value="C">C</input><br>
<input type="radio" name="Answer3" value="D">D</input><br>
I am creating an online survey. At the end of the survey there is a submit button which will get an alert of either "Please answer all questions" or "Submitted". Which alert is used is dependant on whether the user has answered all the questions or not. Im not sure how to create this loop. Please help.
Here, take a look at this demo boootply. Since you're using Bootstrap, jQuery should already be part of your page. Here's the relevent code:
$(document).ready(function(){
$('#submitBtn').click(function(e){
e.preventDefault();
if($('li.option :radio:checked').length == $('li.option').length){
// enter code here to submit your form
alert('submitted');
}else{
alert('Please answer all questions');
}
});
});
And the HTML corrected to:
<ul class="list-unstyled">
<li class="option">
<label>
<input type="radio" name="Answer1" value="A">A
</label>
<br>
<label>
<input type="radio" name="Answer1" value="B">B
</label>
etc..
And just in case, here's the link markup for the bootstrap/jQuery files:
<!-- Latest compiled and minified jQuery-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
I have a multiple forms in one page. Each form has exactly the same content. But i encountered an issue regarding with my labels. I know that label "for" tag should be unique and pointed to the element id but I have to multiply the form for some reason.
Please refer to my code found in jsfiddle my code
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
<!-- another form but the same content -->
<form>
<label for="option1">Option 1</label>
<input type="radio" id="option1" name="options">
<label for="option2">Option 2</label>
<input type="radio" id="option2" name="options">
<label for="option3">Option 3</label>
<input type="radio" id="option3" name="options">
</form>
Thanks
Either:
Generate a prefix that you apply to all the ids in a given instance of a form
Don't use for or id and place the form controls inside the label elements.