How do I make a dependent radio button based on the option selected?
If Engineering Projects is selected, then a radio button should appear and it must have radio buttons of abc, def, ghi, etc.
If MCA Projects is selected then a radio button should appear and it must have radio buttons of jsp, asp, php, java, etc.
If none are selected, no radio button should appear.
<p>
Area Of Interest
<select name="formGender">
<option value="">Select...</option>
<option value="e">Engineering Project</option>
<option value="m">MCA Projects</option>
<option value="t">M-Tech Projects</option>
<option value="s">Msc Projects</option>
</select>
</p>
You need to get value of selected option and display relative radio.
$("#dropdown").change(function(){
var value = $(this).children("option:selected").val();
$(".radioBox").hide();
if (value == "number")
$("#number").show();
else if (value == "alphabet")
$("#alphabet").show();
else if (value == "sign")
$("#sign").show();
});
.radioBox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="">Select on of options</option>
<option value="number">Number</option>
<option value="alphabet">Alphabet</option>
<option value="sign">Sign</option>
<option value="none">None</option>
</select>
<div id="number" class="radioBox">
<label>1</label>
<input type="radio" name="number" />
<label>2</label>
<input type="radio" name="number" />
<label>3</label>
<input type="radio" name="number" />
</div>
<div id="alphabet" class="radioBox">
<label>A</label>
<input type="radio" name="alphabet" />
<label>B</label>
<input type="radio" name="alphabet" />
<label>C</label>
<input type="radio" name="alphabet" />
</div>
<div id="sign" class="radioBox">
<label>#</label>
<input type="radio" name="sign" />
<label>#</label>
<input type="radio" name="sign" />
<label>$</label>
<input type="radio" name="sign" />
</div>
You need to do something like this:
$('#formGender').change(function(){
var areaOfInterest = $('#formGender').find(":selected").text();
if(areaOfInterest.toString() === "Engineering Project"){
var arr=["abc","def","ghi"];
for (i = 0; i < arr.length; i++) {
var radioBtn = $('<input type="radio" name="sub" value="ersubs" checked>'+ arr[i]+"<br>");
radioBtn.appendTo('#radiobuttons');
}
}
else{
$( "#radiobuttons" ).empty();
}
});
Add further more if/else as per your requirements. Here is a working example.
Related
I am trying to write a jQuery where a div is to be shown if a specific option is chosen from dropdown and a specific radio button is clicked. But I am unable to do so.
Html
<pre><code>
<html>
</body>
<select name="Location of positive event" id="dropdown">
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test">
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test1
</label>
</div>
</body>
</html>
</code></pre>
Can you please check the below code? Hope it will work for you. We are creating a jquery code for hiding and show a div which is having id = test, we are adding a class name div and hide it on default. It will be shown when the “AT Work” option is selected from the dropdown and also shown when you click the “Evening” radio button. You can adjust it according to your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xayb9h1p/
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
}
});
}).change();
});
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box2").not(targetBox).hide();
$(targetBox).show();
});
});
.box,
.box2 {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<pre><code>
<html>
<body>
<select name="Location of positive event" id="dropdown">
<option>Select</option>
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test" class="box work ">
<h2>for Dropdown</h2>
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test2
</label>
</div>
<div id="test1" class="box2 2">
<h2>for Radio Button</h2>
<label>
<input name="test3" value="test!" type="checkbox">
Test3
</label>
<label>
<input name="test4" value="test#" type="checkbox">
Test4
</label>
</div>
</body>
</html>
I have a form with a several different field types, all of which need to be complete before submission. I have the submit button disabled and would like to remove the disabled attribute once all the fields have values.
I have examples from previous questions of this functionality working with radios and checkboxes and I've read a few answers which show how to achieve this using <input> fields only:
Disabling submit button until all fields have values
Disable submit button until all form inputs have data
But is there any way we can get check that all field types have values using jQuery? Including <select> and <textarea> fields?
Here's a Codepen of a basic version of my form and here's my HTML:
<div class="contact-form">
<div class="contact-form__row">
<p>Text field</p>
<input type="text" />
</div>
<div class="contact-form__row">
<p>Radio fields</p>
<label for="radio-1">Radio 1</label>
<input id="radio-1" type="radio" name="radio-option" />
<label for="radio-2">Radio 2</label>
<input id="radio-2" type="radio" name="radio-option" />
</div>
<div class="contact-form__row">
<p>Checkbox fields</p>
<label for="checkbox-1">Checkbox 1</label>
<input id="checkbox-1" type="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input id="checkbox-2" type="checkbox" />
</div>
<div class="contact-form__row">
<p>Select options</p>
<select id="my-select" name="my-select">
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
</div>
<div class="contact-form__row">
<p>Text area</p>
<textarea></textarea>
</div>
<div class="contact-form__row">
<input type="submit" value="Submit" disabled />
</div>
</div>
Is this possible?
A few remarks:
In the next snippet, I assume ALL inputs (except radio buttons) have to be filled in before making the form submittable, which does not necessarily represent all real life scenarios.
As mentioned, radios (in this example only 2) are given a special treatment since only one per group can be selected.
Concerning <select>s, one will be considered invalid if an empty option if selected (if one exists). In this example, your select tag always has a non-empty value, I added another to the markup to show its behavior.
Let me know if it works
$(document).ready(function() {
$(":input").on('input', function(){validate();});
$(":input").on('change', function(){validate();});
});
function validate() {
var $submitButton = $("input[type=submit]");
var isValid = true;
if($(':checkbox:checked').length != $(':checkbox').length)
isValid = false;
else if($(':radio:checked').length == 0)
isValid = false;
else{
$('input:text, textarea').each(function() {
if($(this).val() == ''){
isValid = false;
return false;
}
});
if(isValid){
$('select').each(function() {
if($(this).val() == ''){
isValid = false;
return false;
}
});
}
}
$submitButton.prop("disabled", !isValid);
}
.contact-form {
width: 400px;
margin: 50px;
}
.contact-form__row {
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px solid grey;
}
p {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-form">
<div class="contact-form__row">
<p>Text field</p>
<input type="text" />
</div>
<div class="contact-form__row">
<p>Radio fields</p>
<label for="radio-1">Radio 1</label>
<input id="radio-1" type="radio" name="radio-option" />
<label for="radio-2">Radio 2</label>
<input id="radio-2" type="radio" name="radio-option" />
</div>
<div class="contact-form__row">
<p>Checkbox fields</p>
<label for="checkbox-1">Checkbox 1</label>
<input id="checkbox-1" type="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input id="checkbox-2" type="checkbox" />
</div>
<div class="contact-form__row">
<p>Select options</p>
<select id="my-select" name="my-select">
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<select id="my-select" name="my-select">
<option></option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
</div>
<div class="contact-form__row">
<p>Text area</p>
<textarea></textarea>
</div>
<div class="contact-form__row">
<input type="submit" value="Submit" disabled />
</div>
</div>
you can do like this with jQuery: (in codepen replace all your javascript with this code, I have tested it in your codepen)
<script>
$(function() {
$('.contact-form').on('input',':input',function() {
var inputs = $('.contact-form :input');
var num_inputs = inputs.length;
var num_filled = inputs.filter(function() { return !!this.value }).length;
$('.contact-form :submit').prop('disabled',(num_filled<num_inputs));
});
});
</script>
good luck!
I am building a form with 8 radio buttons, 4 for System A and 4 for System B. The options for the radio buttons are CF, ISO, ISO-B, and NW. I want to make it so that when a customer selects a radio button for System A, the same button is selected on System B.
How do I make whatever I select in System A's radio buttons simultaneously selected in System B's radio buttons?
What I am basing it off of
You could use a databinding framework like ReactJS to do this nicely, but here's a basic jQuery example that would work. Just listen to the "change" event on your first set of radio buttons, then use jQuery to select the appropriate radio button from the second set.
$( function() {
$("input[name='system-a']").on("change", function(e) {
var newValue = e.target.value;
$("input[name='system-b'][value='" + newValue + "']").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h2>System A</h2>
<input type="radio" name="system-a" value="1">Option 1</input>
<input type="radio" name="system-a" value="2">Option 2</input>
<input type="radio" name="system-a" value="3">Option 3</input>
<input type="radio" name="system-a" value="4">Option 4</input>
</div>
<div>
<h2>System B</h2>
<input type="radio" name="system-b" value="1">Option 1</input>
<input type="radio" name="system-b" value="2">Option 2</input>
<input type="radio" name="system-b" value="3">Option 3</input>
<input type="radio" name="system-b" value="4">Option 4</input>
</div>
$("input[type='radio']").on("click",function(){
var Name= this.name == "SystemA"?"SystemB":"SystemA";
$("input[name='"+Name+"'][value='"+this.value+"']").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>System A</span>
<br>
<input type="radio" name="SystemA" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemA" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemA" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemA" value="NW"/><lable>NW</lable>
<hr>
<span>System B</span>
<br>
<input type="radio" name="SystemB" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemB" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemB" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemB" value="NW"/><lable>NW</lable>
I have a div named #step-content that I am cloning when the #btn-addProduct is clicked. This div contains radio buttons which gets cloned too.
My problem is when the radio button gets cloned now instead of two radio buttons we have four with the same name="packaging". This only allows me to select 1 out of 4.
What I want is that when the #step-content is cloned the cloned radio buttons should have a +1 added to its name which will make name="packaging" into name="packaging1".
My existing code is:
HTML:
<div class="form-step form-step1">
<p class="step-number">1</p>
<div id="step-content" class="step-content">
<select name="product-type" form="cost-form">
<option value="product" selected disabled>Product Type</option>
<option value="product1">Product Type 1</option>
<option value="product2">Product Type 2</option>
<option value="product3">Product Type 3</option>
<option value="product4">Product Type 4</option>
<option value="product5">Product Type 5</option>
</select>
<input type="text" name="length" placeholder="Length" />
<span class="x">X</span>
<input type="text" name="width" placeholder="Width" />
<span class="x">X</span>
<input type="text" name="height" placeholder="Height" />
<input class="weight" type="text" name="weight" placeholder="Weight" />
<div class="packaging">
<label for="packaging">Needs Packaging?</label>
<input type="radio" name="packaging" value="yes" checked /> yes
<br />
<input type="radio" name="packaging" value="no" /> no
</div>
<input type="text" class="qty" name="qty" placeholder="QTY" />
</div>
</div>
<!-- end form-step -->
<div class="add-product">
<a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span>
</div>
The jQuery that I am using to clone the div is as follows:
document.getElementById('btn-addProduct').onclick = duplicate;
var i = 0;
var original = document.getElementById('step-content');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "step-content" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
JSFIDDLE link:
https://jsfiddle.net/qdryvgw7
Try this:
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "step-content" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
//this will change name of the radio buttons under newly created step-content
$("#step-content"+ i + " input:radio").attr("name", "packaging"+ i);
}
Fiddle
Please check I've added one more line which is changing the name of the packaging radio button.
document.getElementById('btn-addProduct').onclick = duplicate;
var i = 0;
var original = document.getElementById('step-content');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "step-content" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
$("#" + clone.id).find(".packaging input").each(function() { this.name = this.name + i });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-step form-step1">
<p class="step-number">1</p>
<div id="step-content" class="step-content">
<p>
<select name="product-type" form="cost-form">
<option value="product" selected disabled>Product Type</option>
<option value="product1">Product Type 1</option>
<option value="product2">Product Type 2</option>
<option value="product3">Product Type 3</option>
<option value="product4">Product Type 4</option>
<option value="product5">Product Type 5</option>
</select>
<input type="text" name="length" placeholder="Length" />
<span class="x">X</span>
<input type="text" name="width" placeholder="Width" />
<span class="x">X</span>
<input type="text" name="height" placeholder="Height" />
<input class="weight" type="text" name="weight" placeholder="Weight" />
<div class="packaging">
<label for="packaging">Needs Packaging?</label>
<input type="radio" name="packaging" value="yes" checked /> yes
<br />
<input type="radio" name="packaging" value="no" /> no
</div>
<input type="text" class="qty" name="qty" placeholder="QTY" />
</p>
</div>
</div>
<!-- end form-step -->
<div class="add-product">
<a id="btn-addProduct"><img src="img/add-product.png" alt="Add Another Product" /></a> <span>Add Another Product</span>
</div>
I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14 /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>
UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;
function selectAdMeal(value){
//alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='am_' + value;
// alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
function selectChMeal(value){
alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='ch_' + value;
alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
</script>
</head>
<body>
<div ng-app="">
<form name="oitrsvp">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
</div>
<div id="am_1" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
</div>
<div id="am_2" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 2:<br>
<input type="radio" ng-model="ad2meal" value="p">
Pork<br>
<input type="radio" ng-model="ad2meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad2meal" value="v">
Vegetarian
<br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
</div>
<div id="ch_2" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Child 2:<br>
<input type="radio" ng-model="ch2meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch2meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch2meal" value="v">
Vegetarian
<br><br>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</div>
</body>
</html>
In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:
<body ng-app="myApp">
<div ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="am_0" ng-show="numad=='0'">am_0</div>
<div id="am_1" ng-show="numad=='1'">am_1</div>
<div id="am_2" ng-show="numad=='2'">am_2</div>
<select ng-model="numch" id='numch' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="ch_0" ng-show="numch=='0'">
ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});