I want to be able to check a checkbox when a dropdown changes. There will be multiple checkbox/dropdown combos which are dynamically created from mySQL based on other selections. I've figured out how to do it for 1 combo, but not for multiple. Will I have to created a function for each combo? Is there a way in jQuery?
Here's my working code for 1 combo. What do I need to do to have multiple checkbox/dropdown combos?
<!DOCTYPE html>
<html>
<body>
<label><input type='checkbox' name='location[]' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' onChange='myCheckbox(this.value)'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<script>
function myCheckbox(val) {
var x = document.getElementById("location_FF");
if (val == "") {
x.checked = false;
} else {
x.checked = true;
}
}
</script>
</body>
</html>
You could do with jquery.closest() function call
$(document).on('change', '.combo select', function() {
let parent = $(this).closest('.combo');
parent.find('input[type=checkbox]').prop('checked', !!$(this).val().trim())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' >
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
I think your output structure is not right, you could return your html much better, but I give my solution based on your current output:
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
And note that, do not use duplicate ID !
location_FF
Improved version:
$('.Selective select').change(function() {
$(this).parent().find('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
Here's a vanilla JS solution if you're interested.
Edit: I noticed the other solutions unchecked the box if you clicked on its label. So I added a preventDefault() to stop that.
var drops = document.querySelectorAll(".dropdown");
for (var i = 0; i < drops.length; i++) {
drops[i].addEventListener('change', (e) => {
var box = e.target.previousElementSibling.firstElementChild;
if (e.target.options[e.target.selectedIndex].value == '') {
box.checked = false;
} else {
box.checked = true;
}
});
}
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener('click', (e) => {
e.preventDefault();
});
}
<label><input type='checkbox' name='location[]' class='location' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' class="dropdown" id='addWhat_FF'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<br>
<label><input type='checkbox' name='location[]' class='location' id='location_BR' value='BR' /> Bottom Round </label>
<select name='addWhat[BF]' class="dropdown" id='addWhat_BR'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
Related
I have here one radio button class="gender" and 3 dropdown menus class="type","model","acc" and one button class="query".
How to click query button when any of values of three dropdown menus changes but not change to empty value and the value of radiobutton is query?
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type select option[value='selectionKey']").attr('selected') == 'selected' && $(".model select option[value='selectionKey']").attr('selected') == 'selected' && $(".acc select option[value='selectionKey']").attr('selected') == 'selected'&& $('.gender input[type="radio"]').attr("value")=="male"){
$('.query').click();
alert('123')
}else{
}
})
})
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
Try this:
$('input[type="radio"], select').click(function(){
alert('hello');
});
Working Fiddle
First of all you need to correct your code :
Change calss to class also for each class of type,model,account you have used same value="option1" which needs to be changed accordingly as
Change this:
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
To this
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
Now answer to your question is :
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type :selected").val() != '' || $(".model :selected").val() != '' || $(".acc :selected").val() != ''){
$('.query').click();
alert('123')
}else{
alert('no option is selected);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
1)You need to use .is(':selected') property.
.is() selector check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
2)If you want to get value from radio button you need to use :checked property like this:
if($('.gender:checked').val()=="male"){}
Here is solution :
$('.type , .model , .acc').change(function(){
if($(".type option[value='option1']").is(':selected') && $(".model option[value='option2']").is(':selected') && $(".acc option[value='option3']").is(':selected') && $('.gender:checked').val()=="male"){
$('.query').click();
alert('123');
}else{
}
});
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gender" type="radio" name="gender" value="male"> Male<br>
<input class="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select class="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">
You can do that by checking the selected data value length like this- if (this.value.length > 0) and after that, trigger a click on the button :)
Demo code is given here-
$(document).ready(function()
{
$('#query').click(function()
{
alert("Query Clicked");
});
$('input[type=radio][name=gender], select').on('change', function()
{
if (this.value.length > 0)
{
$('#query')[0].click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input id="query" type="button" value="Query">
I'm using the jQuery plugin chosen. I have that working as I want. My issue is using it with a dynamic table. The initial row works but when a new row is added to the table the newly added chosen doesn't work. I did find a question on here about using .on but am completely lost as to how to go about this.
jQuery Code for chosen plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script>
$(function() {
$(".chzn-select").chosen();
});
</script>
HTML CODE
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value="<?php echo $JobNumber;?>" readonly>
</td>
<td>
<input type="text" name="UnitID[]" value="<?php echo $JobNumber;?>-01" readonly>
</td>
<td>
<select name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
JS code for adding rows to table
<script>
function incrementUnitId(unitId) {
var arr = unitId.split('-');
if (arr.length === 1) {return;} // The unit id is not valid;
var number = parseInt(arr[1]) + 1;
return arr[0] + '-' + (number < 10 ? 0 : '') + number;
}
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
row.id = "oldRow"; // We want to take the last value inserted
clone.cells[1].childNodes[1].value = incrementUnitId(clone.cells[1].childNodes[1].value)
table.appendChild(clone); // add new row to end of table
}
function deleteRow() {
document.getElementById("myTable").deleteRow(-1);
}
</script>
hey, I know i'm little late but you need to destroy your chosen and
then append and recontruct it like this:
$(function() {
$(".chzn-select").chosen();
});
function addRow() {
var row = document.getElementById("tableRow"); // find row to copy
var table = document.getElementById("myTable"); // find table to append
$(".chzn-select").chosen("destroy")
var clone = $('#newId').get(0).outerHTML;
var tblRow = '<tr><td> <input type="text"></td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td>'+$("#selectJob").html()+'</td>';
tblRow += '<td> <input type="text"></td>';
tblRow += '<td >'+clone+'</td>';
tblRow += '<td </td> <td </td> ';
tblRow+='</tr>';
$("#myTable").append(tblRow);
$('.chzn-select').chosen()
}
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css" rel="stylesheet" type="text/css">
<h2>Please fill in the information below</h2>
<form action="pmUnitCreate.php" method="post">
<p>Click the Add button to add a new row. Click the Delete button to Delete last row.</p>
<input type="button" id="btnAdd" class="button-add" onClick="addRow('myTable')" value="Add"/>
<input type="button" id="btnDelete" class="button-delete" onClick="deleteRow('myTable')" value="Delete"/>
<br>
<table id="myTable" class="form">
<tr id="heading">
<th><b><font size="4">Job Number</font></b></th>
<th><b><font size="4">Unit Number</font></b></th>
<th><b><font size="4">Job Code</font></b></th>
<th><b><font size="4">Model Number</font></b></th>
<th><b><font size="4">Scope</font></b></th>
</tr>
<tr id="tableRow">
<td>
<input type="text" name="JobNumber[]" value=" " readonly>
</td>
<td>
<input type="text" name="UnitID[]" value=" " readonly>
</td>
<td>
<div id="selectJob">
<select id="JobCode" name="JobCode[]" style="background-color:#FFE68C" required>
<option></option>
<option>F</option>
<option>FS</option>
<option>PD</option>
</select>
</div>
</td>
<td>
<input type="text" name="ModelNumber[]" style="background-color:#FFE68C" required>
</td>
<td>
<select class="chzn-select" id="newId" multiple="true" data-placeholder="Select Scope's" name="Scope[]" style="width:300px;" required>
<option value="100OA">100OA</option>
<option value="BTank">BTank</option>
<option value="WSEcon">WSEcon</option>
<option value="NetPkg">NetPkg</option>
<option value="CstmCtrl">CstmCtrl</option>
<option value="CstmFef">CstmRef</option>
<option value="CstmSM">CstmSM</option>
<option value="CstmHV">CstmHV</option>
<option value="CPCtrl">CPCtrl</option>
<option value="DesiHW">DesiHW</option>
<option value="DigScroll">DigScroll</option>
<option value="DigScroll">DFGas</option>
<option value="DWall">DWall</option>
<option value="MZ-DD">MZ-DD</option>
<option value="DPP">DPP</option>
<option value="Encl">Encl</option>
<option value="PlateHX">PlateHX</option>
<option value="ERW">ERW</option>
<option value="ERWModule">ERWModule</option>
<option value="ERVMod">ERVMod</option>
<option value="EvapBP">EvapBP</option>
<option value="PreEvap">PreEvap</option>
<option value="XP">XP</option>
<option value="Extend">Extend</option>
<option value="FanWall">FanWall</option>
<option value="FillStat">FillStat</option>
<option value="FFilt">FFilt</option>
<option value="PFilt">PFilt</option>
<option value="CarbFilt">CarbFilt</option>
<option value="CustFilt">CustFilt</option>
<option value="MGH(H)">MGH(H)</option>
<option value="GHeat">GHeat</option>
<option value="HighStatic">HighStatic</option>
<option value="HGBP">HGBP</option>
<option value="HGRH">HGRH</option>
<option value="HPConv">HPConv</option>
<option value="GFHumid">GFHumid</option>
<option value="TOHumid">TOHumid</option>
<option value="MHGRH">MHGRH</option>
<option value="LowAF">LowAF</option>
<option value="LowAFSF">LowAFSF</option>
<option value="LowAmbient">LowAmbient</option>
<option value="MEHeat(R)">MEHeat(R)</option>
<option value="MEHeat(I)">MEHeat(I)</option>
<option value="HGH(R)">MGH(R)</option>
<option value="MGH(H)">MGH(H)</option>
<option value="MtrRR">MtrRR</option>
<option value="MotorGM">MotorGM</option>
<option value="MS-Mod">MZ-Mod</option>
<option value="NatConv">NatConv</option>
<option value="OAFMS">OAFMS</option>
<option value="OSMotor">OSMotor</option>
<option value="MZ-VAV">MZ-VAV</option>
<option value="Mon">Mon</option>
<option value="PumpPkg">PumpPkg</option>
<option value="PipePkg">PipePkg</option>
<option value="ServLite">ServLite</option>
<option value="SparkRes">SparkRes</option>
<option value="SSLube">SSLube</option>
<option value="UVLights">UVLights</option>
<option value="VSComp">VSComp</option>
<option value="LCVAV">LCVAV</option>
<option value="XFVAV">XFVAV</option>
<option value="WCCond">WCCond</option>
<option value="WSHPConv">WSHPConv</option>
<option value="3RConv">3RConv</option>
<option value="WiringGM">WiringGM</option>
<option value="XFan">XFan</option>
<option value="RFan">RFan</option>
<option value="SFan">SFan</option>
<option value="OAHood">OAHood</option>
<option value="XAHood">XAHood</option>
<option value="XALouver">XALouver</option>
<option value="OALouver">OALouver</option>
<option value="SteamCoil">SteamCoil</option>
<option value="HWCoil">HWCoil</option>
<option value="CHWCoil">CHWCoil</option>
<option value="CondCoil">CondCoil</option>
<option value="DXCoil">DXCoil</option>
<option value="F&BP">F&BP</option>
<option value="Xfrmr">Xfrmr</option>
<option value="WCCond">WCCond</option>
<option value="PLFrHX">PlFrHX</option>
</select>
</td>
</table>
I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?
You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>
I'd like to have a requiered Select for the "Brand car", the attribute is added but the problem is that I have already one value "Choose the brand name"
how can I make this work? (for the HTML5 checking)
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
}
....
}
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option id="0">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
You can add empty value to the select so it will be required if he chose "Choose the brand name"
the code will be like that:
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option value="" >Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
How about this??
$("#category").change(function() {
var category = parseInt($("#category").val(), 10);
switch (category){
case 2: //car
$("#car_part").show("slow");
$("#brand_car").prop('required',true);
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="category" id="category">
<option value="0">Choose the catecory</option>
<option value='2' id='cat2' > Cars </option>
<option value='88' id='cat88' > Trucks </option>
</select>
<select id="brand_car" name="brand_car">
<option selected="true" style="display:none;">Choose the brand name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
<!--If you want to display default text as option but want to disable it below will work-->
<select id="brand_car" name="brand_car">
<option selected disabled>Choose the brand name</option>name</option>
<option id="10" title="Audi">AUDI</option>
<option id="16" title="BMW">BMW</option>
</select>
<FORM NAME="form1" METHOD="POST" ACTION="survey.php">
<P>q1: How do you rate Ahmed Ebaid?</P>
<P>
<INPUT TYPE='Radio' Name='q1' value='1' id='q1'>1</P>
<P>
<INPUT TYPE='Radio' Name='q1' value='2' id='q1'>2</P>
<P>
<INPUT TYPE='Radio' Name='q1' value='3' id='q1'>3</P>
<P>
<INPUT TYPE='Radio' Name='q1' value='4' id='q1'>4</P>
<P>
<INPUT TYPE='Radio' Name='q1' value='5' id='q1'>5</P><span style='color:red' id='radio_error'></span>
<p>q2: Who is your best best friend?</P>
<select name='q21' id='q2'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<select name='q22' id='q2'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<select name='q23' id='q2'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<P>q3: How do you rate def?</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='1' id='q3'>1</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='2' id='q3'>2</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='3' id='q3'>3</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='4' id='q3'>4</P>
<P>
<INPUT TYPE='Radio' Name='q3' value='5' id='q3'>5</P><span style='color:red' id='radio_error'></span>
<p>q4: Who is your best best friend?</P>
<select name='q41' id='q4'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<select name='q42' id='q4'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<select name='q43' id='q4'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<select name='q44' id='q4'>
<option value='0'>Select a Name</option>
<option value='2001'>abc</option>
<option value='2002'>def</option>
<option value='2003'>ghi</option>
<option value='2005'>jkl</option>
<option value='2006'>mno</option>
<option value='2007'>pqr</option>
<option value='2008'>stu</option>
</select>
<P>q5: How do you rate the attitude of Farida Ebaid?</P>
<P>
<INPUT TYPE='Radio' Name='q5' value='1' id='q5'>1</P>
<P>
<INPUT TYPE='Radio' Name='q5' value='2' id='q5'>2</P>
<P>
<INPUT TYPE='Radio' Name='q5' value='3' id='q5'>3</P>
<P></P>
<P></P><span style='color:red' id='radio_error'></span>
<p>
<INPUT TYPE='hidden' Name='h2' VALUE=''>
</P>
<p>
<INPUT TYPE="Submit" Name="Submit1" VALUE="Click here to vote">
</P>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(function(){
$('form').submit(function(e){
var answers = '';
var len = 5;
$('input[type=Radio]:checked').each(function() {
if (answers !== '') {
answers += ',';
}
answers += $(this).val();
//alert(answers);
})
$('input[name=h2]').val(answers);
for (var i = 1; i <= len; i++ ) {
var qNum = 'q'+i;
//document.write(qNum);
if ($('#'+qNum+'').is(':radio')) {
if (($('input[name='+qNum+']:checked').length == 0) ){
alert("No Selection is made for "+ qNum);
return false;
}
}
else if ($('#'+qNum+'').is('select')) {
var j = 1;
var nominatefriend = qNum+j;
alert (nominatefriend);
var check = '';
var chosen = new Array();
while (check = document.getElementsByName("nominatefriend")) {
alert(check);
var len = document.form1[nominatefriend].length;
alert (len);
for (var i = 0; i < len; i++) {
if (document.form1[nominatefriend][i].selected) {
chosen[j] = document.form1[nominatefriend][i].value;
alert (chosen[j]);
}
}
j++;
nominatefriend = qNum+j;
alert (nominatefriend);
}
}
} // for loop
}); // form submit function
})//function
The above code executes fine. However, for q24 which is a non existing form element, it reports the following error. TypeError: document.form1[nominatefriend] is undefined. This is again a non existing form element. I'm thinking that the while loop should exit once a given form element doesn't exist.
Ok, I've reworked this to use JQuery to look at each element rather than trying to find the names of each element using a loop. I feel this is a more concise way to do it.
http://jsfiddle.net/SeanKendle/9VHF3/
check out the fiddle answer... let me know if you need more help.
Remove the quotes around nominateFriend
while (check = document.getElementsByName(nominatefriend)) {
Also, I would suggest removing the assignment as well
while (document.getElementsByName(nominatefriend)) {