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
Related
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>
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 implement something similar to a google search with radio buttons. Depending on the radio button selected, would change the type of search (search,images,video, etc).
Right now I have:
<div id ="searchtext">
<form method="get" id ="searchbox" action="http://www.google.com/search"/>
<input type="text" name="q" size="30" class="searchtext" maxlength="255" value="" />
<input type="image" value="Search" class="searchbutton" src="images/searchbar/searchbutton.png"/>
<br/>
</div>
<div id="radiosearch">
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.searchbox.action='http://www.youtube.com/results?q=';"/>Youtube
<span class = "class1">
Change Theme
</span>
</div>
However, clicking on the radio boxes is not changing the form action. Any Ideas?
Try
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.google.com/search?q=';" checked="checked"/> Web
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://images.google.com/images?q=';"/>Images
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://maps.google.com/maps?hl=en&tab=wl?q=';"/>Maps
<input type="radio" name="radiosearch" onclick="document.getElementById('searchbox').action='http://www.youtube.com/results?q=';"/>Youtube
i have a html form to develope. but form is not getting submitted until i don't press Submit button. i want, when we select any radio button or checkbox and press Enter it should be submitted
my html is like:
<html>
<head>
<title>select preferences</title>
</head>
<body>
<input type="radio" name="sex" value="male" /> Male<br/>
<input type="radio" name="sex" value="female" /> Female<br/>
<button type="submit">Click Me!</button>
</body>
</html>
please help me resolve this. and give some links for related tutorial.
You're missing the <form> tag.
Have a look here.
On change of your radio buttons, submit the form using:
$('#form-id').submit();
So, your HTML should be:
<form id='form-id' method='post' action=''>
<input type="radio" name="sex" value="male" /> Male<br/>
<input type="radio" name="sex" value="female" /> Female<br/>
<button type="submit">Click Me!</button>
</form>
and your script should be:
$(function(){
$('input[type=radio]').change(function(){
$('#form-id').submit();
});
});
Add form tag
<form method="post" action="somepage">
//add you inputs here
<form>
I am a beginner with programming. I have created an HTML page with a text box, text area, select box, checkboxes, and radio buttons. I am trying to show how VBScript works with HTML for a class assignment. One of the tasks is to have a series of editing rules. The one I need help with is making sure that at least one checkbox is checked before the user can submit the form. How would I do this in VBScript?
Here is my code so far:
<html>
<head>
<script language="vbscript">
<!--
sub fred
end sub
-->
</script>
</head>
<body>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>
<p>What is your favorite animal to see at the zoo?
<select name="zooanimal">
<option>default value
<option>elephants
<option>giraffes
<option>tigers
<option>seals
</select>
<p>
What is your favorite color?<br><p>
blue <input name="rb" type="radio" value="bluechecked" checked> green <input name="rb" type="radio" value="greenchecked">
pink <input name="rb" type="radio" value="pinkchecked"> yellow <input name="rb" type="radio" value="yellowchecked"> red <input name="rb" type="radio" value="redchecked"> black <input name="rb" type="radio" value="blackchecked"></p>
Which of these games do you play?<br><p>
Starcraft <input name="game" value="Starcraft" type="checkbox"> World of Warcraft <input name="game" value="WorldofWarcraft" type="checkbox">
League of Legends <input name="game" value="LeagueofLegends" type="checkbox"> none <input name="game" value="none"
type="checkbox"><P>
<p><input type="button" value="EDIT AND REPORT" onClick="fred">
<p>
<p>
</form>
</body>
</html>
If (f1.rb.checked = True) Or (f1.game.checked = True) Then