HTML radio input with (required) text option for "other" - javascript

I have a set of radio inputs with an option "other" that has a text field. My question is how I make the text field required when the other option is selected.
The code I came up with so far::
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="">Other
<input type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
</script>

try calling a function when other radio button is clicked to set input field to required :
<script>
function changeradioother(){
var other= document.getElementById("other");
other.value=document.getElementById("inputother").value;
}
function setRequired(){
document.getElementById("inputother").required=true;
}
function removeRequired(){
if(document.getElementById("inputother").required == true){
document.getElementById("inputother").required=false;
}
}
</script>
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1" onclick="removeRequired();">Option 1<br>
<input type="radio" name="option" value="2" onclick="removeRequired();">Option 2<br>
<input type="radio" name="option" value="3" onclick="removeRequired();">Option 3<br>
<input type="radio" name="option" value="" onclick="setRequired();" id="other">Other
<input id="inputother" type="text" name="othertext" onchange="changeradioother()">
<input type="submit" value="Submit">
</form>

There are many diff ways to this one is here
give id to your radio box which is other and give id to text box.
function changeradioother(){
if(document.getElementById("Other").checked ) {
if(document.getElementById("inputtext").value == ''){
alert('input required');
}
}
return false
}
<form method="POST" action="testPage.php" onsubmit="return changeradioother()">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" value="" id="Other">Other
<input type="text" name="othertext" id="inputtext" >
<input type="submit" value="Submit">
</form>

You can do something like that.
Going through all radio button to check which was clicked.
By the way, you did not put an id to the radio button Other.
var radio = document.querySelectorAll("input[name='option']");
for(var i = 0;i< radio.length;i++){
radio[i].onclick = function(){
if(this.id == "other"){
document.getElementById('otherText').setAttribute("required", true);
}else{
document.getElementById('otherText').removeAttribute("required");
}
}
}
<form method="POST" action="testPage.php">
<input type="radio" name="option" value="1">Option 1<br>
<input type="radio" name="option" value="2">Option 2<br>
<input type="radio" name="option" value="3">Option 3<br>
<input type="radio" name="option" id="other">Other
<input type="text" name="othertext" id="otherText">
<input type="submit" value="Submit">
</form>

Related

How to show specific value when click on any radio button in console using JavaScript?

I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.

How to set property of radio button to checked

There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>

validate coice of more than 2 radio buttons in javascript

I'm trying to get some js to work in checking if one of 3 radio buttons is selected in my html form, but I can't seem to get it to work.
Currently, I'm using
<label for="ctype"> Select Card Type:</label>
<br>
<label for="visa">Visa</label>
<input type="radio" name="ctype" id="visa" value="visa" ></input><br>
<label for="mastercard">Master Card</label>
<input type="radio" name="ctype" id="mastercard" value="mastercard"></input><br>
<label for="amex">American Express</label>
<input type="radio" name="ctype" id="amex" value="amex"></input>
if (document.forms[0].visa.checked == true){
}
else if (document.forms[0].mastercard.checked == true){
}
else if (document.forms[0].amex.checked == true){
}
else {
alert("Please select a credit card type.");
return false;
}
I've also tried running it with document.getElementById(visa/mastercard/amex).checked but had no luck there either.
Unfortunately, I cannot just use the html required as it has to be a js validation.
JavaScript comparison operator is === instead of ==.
To get the value of the selected ctype item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
alert($('input[name=ctype]:checked', '#myForm').val());
});
<form id="myForm">
<input type="radio" name="ctype" value="1" /> 1 <br />
<input type="radio" name="ctype" value="2" /> 2 <br />
<input type="radio" name="ctype" value="3" /> 3 <br />
</form>
// alert(document.querySelector('input[type="radio"]:checked').outerHTML);
if (document.querySelector('input[type="radio"]:checked')==undefined){
alert("Please select a credit card type.");
// return false;
}
<label for="ctype"> Select Card Type:</label>
<br>
<label for="visa">Visa</label>
<input type="radio" name="ctype" id="visa" value="visa" checked="true" ></input><br>
<label for="mastercard">Master Card</label>
<input type="radio" name="ctype" id="mastercard" value="mastercard"></input><br>
<label for="amex">American Express</label>
<input type="radio" name="ctype" id="amex" value="amex"></input>

check all radio groups are checked

I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length

Javascript code works, but "not defined" warning in Firebug

I have javascript code below, it's working but within Firebug it says
document.form1.element[i] is not defined
and then it works fine
function set_action(){
for (var i=0;i<=3;i++)
{
if (document.form1.PayType[i].checked == true)
{
var billerid = document.form1.billerid[i].value;
document.form1.action = billerid +"_mypag.htm";
}
}
and my html markup is as below
<form name="form1" action="...">
<input name="PayType" type="radio" value="0" id="ultipay" class="radiobtn" checked/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="1" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>
</select>
<input name="PayType" type="radio" value="2" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="3" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input type="button" onclick="set_action()" value="submit">
</form>
I don't know why I am getting this error.
If you have only one radio button named PayType, then you need to address it with document.form1.PayType. It is addressed as an array document.form1.PayType[i] iff there are multiple radio buttons with the same name. For instance:
<input name="PayType" type="radio" value="0" id="ultipay0" class="radiobtn" checked="checked" />
<input name="PayType" type="radio" value="1" id="ultipay1" class="radiobtn" />

Categories