Show or hide elements based on multiple radio button selections - javascript

I have two radio buttons
Select whether A or B.
Select whether C or D.
Based on the two selections, I want my dropdown list to be updated
Here are my codes.
$(function() {
$("#A").hide();
$("#B").hide();
$("#C").hide();
$("#D").hide();
$('.AorB').change(function() {
if ($(this).val() == 'A') {
$('.CorD').change(function() {
if ($(this).val() == 'C') {
$("#AC").show();
$("#BC").hide();
$("#AD").hide();
$("#BD").hide();
$("#noselect").hide();
} else if ($(this).val() == 'D') {
$("#AC").hide();
$("#BC").hide();
$("#AD").show();
$("#BD").hide();
$("#noselect").hide();
}
});
} else if ($(this).val() == 'B') {
$('.CorD').change(function() {
if ($(this).val() == 'C') {
$("#AC").hide();
$("#BC").show();
$("#AD").hide();
$("#BD").hide();
$("#noselect").hide();
} else if ($(this).val() == 'D') {
$("#AC").hide();
$("#BC").hide();
$("#AD").hide();
$("#BD").show();
$("#noselect").hide();
}
});
} else {
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<tr>
<td>
<label>Select A or B:</label>
</td>
<span class="text_11">
<td><input type="radio" id="A" name="AorB" class="AorB" required value="A"/><radio style="font-size: 16px;"> A</radio>
<input type="radio" id="B" name="AorB" class="AorB" value="B"/><radio style="font-size: 16px;"> B </radio></span>
</td>
</tr>
<tr>
<td>
<label>Select C or D:</label>
</td>
<span class="text_11">
<td><input type="radio" id="C" name="CorD" class="CorD" required value="C"/><radio style="font-size: 16px;"> C</radio>
<input type="radio" id="D" name="CorD" class="CorD" value="D"/><radio style="font-size: 16px;"> D</radio></span>
</td>
</tr>
<tr>
<td class="select">
<label>Date:</label>
</td>
<td>
<select id="noselect" name="noselect">
<option value="1">Select</option>
<option value="1">select A or B first</option>
</select>
<select id="AC" name="AC">
<option value="">Select</option>
<?php include_once "AC.php"?>
</select>
<select id="BC" name="BC">
<option value="">Select</option>
<?php include_once "BC.php"?>
</select>
<select id="AD" name="AD">
<option value="">Select</option>
<?php include_once "AD.php"?>
</select>
<select id="BD" name="BD">
<option value="">Select</option>
<?php include_once "BD.php"?>
</td>
</select>
</tr>
I now have 2 issues:
Scenario 1: If I select A and then C, the drop down list changes to the correct values. If I then change A to B, the drop down list does not update.
Scenario 2: If I select D or C and then A or B, the drop down list does not change.
How do I improve the jquery such that anytime a radio button is selected in whatever order, the correct dropdown list is shown. very new to javascript so any help is appreciated.

If I understand your issue correctly, the below will do what you need.
The biggest issue with your current attempt is that when you click A, you add an event handler to the CorD element, but then if you change it to B you add another event handler to the CorD element and you dont remove the original event handler so when you change CorD, both events are fired. As you can see below, you can avoid that and (all the other duplicated code) by setting it up more simply
var $all=$('.all').hide();
$('.listen').change(function(){
$all.hide()
var thisLetter = $('[name="AorB"]:checked').val();
var thatLetter = $('[name="CorD"]:checked').val();
$all.each(function(){
var $this=$(this);
if($this.hasClass(thisLetter) && $this.hasClass(thatLetter)){
$this.show();
$('#noselect').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="A" name="AorB" class="listen" required value="a" />
<radio style="font-size: 16px;"> A</radio>
<input type="radio" id="B" name="AorB" class="listen" value="b" />
<radio style="font-size: 16px;"> B </radio>
<input type="radio" id="C" name="CorD" class="listen" required value="c" />
<radio style="font-size: 16px;"> C</radio>
<input type="radio" id="D" name="CorD" class="listen" value="d" />
<radio style="font-size: 16px;"> D</radio>
<br>
<br>
<select id="noselect" name="noselect">
<option value="1">Select</option>
<option value="1">select A or B first</option>
</select>
<select class="a c all" name="AC">
<option value="">Select AC</option>
</select>
<select class="b c all" name="BC">
<option value="">Select BC</option>
</select>
<select class="a d all" name="AD">
<option value="">Select AD</option>
</select>
<select class="b d all" name="BD">
<option value="">Select BD</option>
</select>

Related

How to Loop Through Rows of Checkboxes in an HTML Table in Javascript

I have a question about how to loop through checkboxes in a table.
What I want to do is create two checkboxes per row in a table along with a pulldown menu. I will run a conditional in javascript based upon if both checkboxes per row are selected. If both checkboxes in a row are selected along with a pulldown menu option, I will run a conditional.
So I want to loop through each row of the table checking if both checkboxes are selected. I think another way to do this is to maybe use divs and classes. How do I do this?
My sample code below is not in a table, but it is what I have so far just to get the checkboxes and pulldown menu to work.
<html>
<div class="container">
<input type="checkbox" class="checks" value ="Apple">Apple<br>
<input type="checkbox" class="checks" value ="BananaValue">Banana<br>
<input type="checkbox" class="checks" value ="Carrot">Carrot<br>
<form>
Select your favorite fruit:
<select id="mySelect" /*onchange="run();"*/>
<option value="apple">apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<input type="submit" onclick="run()" />
<script>
function run() {
var checks = document.getElementsByClassName('checks');
var str = '';
for (i = 0; i < 3; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
</script>
</div>
</html>
Update:
The code is updated to work with the info from your comment. It will only run when the one button is clicked
Orig:
I commented out (but kept) the code for this in case you need it later. Here's a working example of what you want (I think). In the window.load listener, we first loop through all the rows to see if any are ready to run the conditional on. Then we set up the change listener on each form element in the table. The listener listens for a change event, then runs our row check.
/*
window.addEventListener('load', () => {
document.querySelectorAll('.theTable tr').forEach(row => checkRow(row))
document.querySelectorAll('.theTable td input[type=checkbox], .theTable td select').forEach(input => {
input.addEventListener('change', e => checkRow(e.target.closest('tr')))
})
})
*/
function run() {
document.querySelectorAll('.theTable tr').forEach((row, i) => {
let allChecked = row.querySelectorAll('input[type=checkbox]').length === row.querySelectorAll('input[type=checkbox]:checked').length
if (allChecked && row.querySelectorAll('select option:checked').length > 0 && row.querySelector('select option:checked').value !== '') {
console.log('run conditional on row index ', i)
}
})
}
<input type="submit" onclick="run()" />
<table class='theTable'>
<tr>
<form>
<td>
<label> <input type="checkbox" class="checks" value="Apple" checked>Apple </label>
<label> <input type="checkbox" class="checks" value="BananaValue" checked>Banana </label>
<label> <input type="checkbox" class="checks" value="Carrot" checked>Carrot </label>
</td>
<td>
Select your favorite fruit:
<select id="mySelect">
<option value=""></option>
<option value="apple">apple</option>
<option value="orange">Orange</option>
<option selected value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</td>
</form>
</tr>
<tr>
<form>
<td>
<label> <input type="checkbox" class="checks" value="Apple">Apple </label>
<label> <input type="checkbox" class="checks" value="BananaValue">Banana </label>
<label> <input type="checkbox" class="checks" value="Carrot">Carrot </label>
</td>
<td>
Select your favorite fruit:
<select id="mySelect">
<option value=""></option>
<option value="apple">apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</td>
</form>
</tr>
</table>
I read the initial conditions of the problem a little differently,
therefore this may not suffice as the acceptable answer.
I read that 2 and only 2 vegetable choices were allowed per row.
The select choice of fruit was to be added only if #1 condition fulfilled.
With that in mind, here is my solution submission.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: https://stackoverflow.com/questions/68329725/how-to-loop-through-rows-of-checkboxes-in-an-html-table-in-javascript -->
<title> Table Food Choices </title>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
</style>
<body>
<form>
<h3> From each row: </h3>
<table id="tbl">
<thead>
<tr>
<th colspan="3">Select 2 vetables</th>
<th>And your favorite fruit:</th>
</tr>
</thead>
<tbody>
<tr>
<td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
<td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
<td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
<th>
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
<option value="orange">Orange</option>
<option value="peach">Peach</option>
<option value="pineapple">Pineapple</option>
<option value="tangerine">Tangerine</option>
</select>
</th>
</tr>
<tr>
<td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
<td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
<td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
<th>
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
<option value="orange">Orange</option>
<option value="peach">Peach</option>
<option value="pineapple">Pineapple</option>
<option value="tangerine">Tangerine</option>
</select>
</th>
</tr>
<tr>
<td> <label><input type="checkbox" class="checks" value ="Beans">Green Bean</label></td>
<td> <label><input type="checkbox" class="checks" value ="Corn">Corn</label></td>
<td> <label><input type="checkbox" class="checks" value ="Carrot">Carrot</label></td>
<th>
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
<option value="orange">Orange</option>
<option value="peach">Peach</option>
<option value="pineapple">Pineapple</option>
<option value="tangerine">Tangerine</option>
</select>
</th>
</tr>
</tbody>
</table>
</form>
<input id="picks" type="submit" value="Submit choices">
<br>
Choices
<pre id='choices'></pre>
<script>
function run(){
var
tblRows = document.querySelectorAll('tbody tr'),
checks = document.querySelectorAll('.checks'),
selects = document.querySelectorAll('select'),
strs = []; // console.log(tblRows.length, checks.length, selects.length);
for (r = 0; r < tblRows.length; r++) {
let cbCount = 0, tstr = '';
for (cb=0; cb < 3; cb++) {
if ( checks[(r*3)+cb].checked ) {
cbCount++;
tstr += checks[(r*3)+cb].value + ' ';
}
}
if ( cbCount == 2 ) { strs.push(tstr + " " + selects[r].value); } // accept only 2 checkbox with 1 select values
}
document.getElementById('choices').textContent = strs.join('\n');
}
function init() {
document.getElementById('picks').addEventListener('click', run);
}
init();
</script>
</body>
</html>

Disabling alternate listboxes when clicking on alternate radiobuttons

what I have working is 2 radio buttons and one listbox. When the first radio button is clicked, the listbox is disabled but when the second radiobutton is clicked, the listbox is available. I now have to modify the app to have two listboxes and 3 radiobuttons. If the first radio-button is clicked, I need both listboxes disabled. If the second radiobutton is clicked, I need only the first listbox to be disabled. If the third radio-button is selected, I need only the second listbox to be disabled. I have no idea how to begin to do this in Javascript or JQuery! Any help would be very appreciated!! (I'm working in ColdFusion if that is relevant).
This is the code I have working right now. I have to add one more radiobutton and another listbox to it.
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked){
document.getElementById("T1").disabled=true;
}else {
document.getElementById("T1").disabled=false;
}
}
</script>
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>`
if your code is working can you just copy and paste the radio buttons and listbox you already have? if so this could work.
<form name="MedicaidResidents" action="Medicaid_Residents.cfm" method="post" id='f1'>
<input type="radio" name="choice" value='1' onClick="check_radio()";>States<br><br>
<input type="radio" name="choice" value='2' onClick="check_radio()";>Houses
<input type="radio" name="choice" value='3' onClick="check_radio()";>Foo
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
<script type="text/javascript">
function check_radio()
{
if(document.MedicaidResidents.choice[1].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=true;
}
else if (document.MedicaidResidents.choice[2].checked)
{
document.getElementById("T1").disabled=true;
document.getElementById("T2").disabled=false;
}
else if (document.MedicaidResidents.choice[3].checked)
{
document.getElementById("T1").disabled=false;
document.getElementById("T2").disabled=true;
}
}
</script>
Please find the below jsfiddle as well as the code.
http://jsfiddle.net/Manoj85/3jy0crdx/
There are many solutions for this.
My solution is using JQuery to disable based on radio button selection. And highlight with red background when the list box is disabled.
HTML Code:
<form name="myForm" action="Medicaid_Residents.cfm" method="post" id='f1'>
<div>
<input type="radio" name="choice" value="1" checked> States
<input type="radio" name="choice" value="2"> Houses
<input type="radio" name="choice" value="3"> Other
</div>
<div>
<p> List Box 1 </p>
<select name="stateprompt1" multiple="multiple" size="10" id="T1">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
<div>
<p> List Box 2 </p>
<select name="stateprompt2" multiple="multiple" size="10" id="T2">
<option value="" selected> -Select States- </option>
<cfloop query="Medicaid_States">
<option value="#Medicaid_States.cStateCode#">#Medicaid_States.cStateCode#</option>
</cfloop>
</select>
</div>
</form>
JS:
$(document).ready(function() {
var all_radio_buttons = document.myForm.choice;
var prev = null;
var selected_radio_value = "1";
doRefresh(selected_radio_value);
for (var i = 0; i < all_radio_buttons.length; i++) {
all_radio_buttons[i].onclick = function() {
console.log(this.value);
selected_radio_value = this.value;
doRefresh(selected_radio_value);
};
CSS Code:
form#f1 > div {
border: solid 1px red;
margin-bottom: 10px;
}
form#f1 > div > select {
width: 200px;
height: 100px;
}
form#f1 > div > select[disabled] {
background: red;
}
Hope this helps.

How to limit count of checked checkboxes equal to select value using jquery?

I'm trying to limit the amount of checkboxes able to be checked according to what select option the user chooses i.e. option1 = 1 checkbox option 2 = 2 checkboxes and if they try to choose more then alert the user and .prop("checked", false).
but i just get weird stuff happening and i can't figure why please help!!
html:
<form>
<select onclick="systemSelected();" class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form onclick="limitCheckbox(userSelected);">
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
javascript:
var userSelected = 0;
function systemSelected() {
$(".mySelectBox option").each(function(){
if ($(this.selected)) {
userSelected = parseInt($(".mySelectBox").val());
}
});
}
function limitCheckbox(userSystem) {
$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked".length > userSystem)) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked".length === 0 )) {
alert("please select a game too play");
}
});
}
Don't use alerts (Why should a user feel stupid)
Use the disabled property (Make a user see & know)
var $ckb = $('[name*=box]'),
$sel = $('.mySelectBox');
function ckkk () {
var ckd = $ckb.filter(":checked").length,
max = parseInt($sel.val(), 10);
if(ckd > max) $ckb.prop({checked:false, disabled:false});
else $ckb.not(":checked").prop({disabled: ckd >= max});
}
$ckb.add($sel).on("change", ckkk);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
use $("input[type=checkbox]").on('change',function(){ selector which will fire event on every change of checkbox. And you can manage your cases with conditions in it.
Please check below snippet.
var userSelected = 0;
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
$(this).prop("checked", false);
alert("too many numbers");
} else if ($("input[type=checkbox]:checked").length === 0 ) {
alert("please select a game too play");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>
$('input:checkbox').change(function() {
var number = $('.mySelectBox option:selected').val();
if ($('input:checkbox:checked').length > number) {
alert('more than selected')
$(this).prop('checked', false);//dont check the click checkbox
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select class="mySelectBox">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</form>
<form>
<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">
</form>

Autoselect option, and autocomplete textarea values onclick

Suppose there is a link (two links, actually), each supposed to be doing something similar and each doing something different.
<a style="cursor:pointer;" name="A">#</a>
<a style="cursor:pointer;" name="A">Product A</a>
<a style="cursor:pointer;" name="B">#</a>
<a style="cursor:pointer;" name="B">Product B</a>
etc.
When the # anchor is clicked, it needs to open a popup, prompt for a number, then on submit, autoselect the option and set textarea value to the number entered.
<select>
<option selected="selected" value="0"></option>
<option value="A">Spies</option>
<option value="B">Militia</option>
</select>
</td>
<td><input value="0" type="text"></td>
But when the Product anchor is clicked, it needs to do the same thing, but just set the selected element to the corresponding value (Product A autoselects the selects to A, etc.)
I have some stuff in JavaScript to make this work, but I'd like it to be in jQuery, and am having a hard time figuring it out.
Some JS:
The anchors have onclick="var newNumUnits=prompt('How many of Product X do you want to default to? 'Enter amount here'); quickFill(1111115,newNumUnits);", which takes care of a lot of the stuff, but it gets "large" and "complicated", and I'd really like to see the code be rendered easier (if possible) in jQuery.
function quickFill(ProdID, num) {
for(i=0; i<document.myForm.elements.length; i++) {
fieldname = document.myForm.elements[i].name;
fieldvalue = document.myForm.elements[i].value;
if (fieldname.indexOf("_") != -1) {
fieldNameArray = fieldname.split("_");
smallFieldName = fieldNameArray[0];
myPUID = fieldNameArray[1];
if (smallFieldName == "ProdID") {
selectfield = document.myForm.elements[i];
for (var j=0; j<selectfield.options.length;j++) {
if (selectfield.options[j].value == ProdID) {
selectfield.options[j].selected=true;
textinputfield = document.getElementById("num_"+myPUID);
textinputfield.value=num;
}
}
}
}
}
updateStatus();
}
Any help would be appreciated.
EDIT: The actual, unedited code that I'm currently working with:
<tr class="L1">
<td></td>
<td>1898, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[213][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1900, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[329][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2018
</td>
<td>9</td>
<td>Military Installation
</td>
<td>
<select name="struct[330][str]">
<option selected="selected" value="0"></option>
<option value="U1" data-price="1200">K-9 Corps</option>
<option value="U5" data-price="9000">Riflemen</option>
<option value="U6" data-price="11000">Sappers</option>
<option value="U8" data-price="24000">Jägers</option>
<option value="U9" data-price="27000">Commandos</option>
<option value="U10" data-price="33000">Red Berets</option>
<option value="U12" data-price="110000">Ford GPW</option>
<option value="U13" data-price="222000">M3 Half-tracks</option>
<option value="U14" data-price="350000">7TP</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2017
</td>
<td>9</td>
<td>Light Airfield
</td>
<td>
<select name="struct[331][str]">
<option selected="selected" value="0"></option>
<option value="U15" data-price="155000">PZL.23 Karaś</option>
<option value="U16" data-price="175000">R-4 Hoverfly</option>
<option value="U17" data-price="650000">PZL P.11</option>
<option value="U18" data-price="1050000">P-39 Airacobra</option>
<option value="U19" data-price="1500000">C-46 Commando</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
</td>
</tr>
Some stuff that I experimented with before, in JavaScript, that works (goes with the the quickFill function posted above:
<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U3,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U3);">Spies</a>
<br>
<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U2,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U2);">Blackshirts</a>
That style of anchors then continues for about 30 more combos, different U#'s, different names. What needs to happen is that when the anchor with text is clicked, all selects that contain that same U# are then auto-selected to it, and when the # anchor is clicked, the same thing happens, but also changes the corresponding textarea to the number entered in the prompt.
You will need to do some changes to the HTML <a> tags first:
<a style="cursor:pointer;" name="A" data-type="hash">#</a>
<a style="cursor:pointer;" name="A" data-type="product">Product A</a>
<a style="cursor:pointer;" name="B" data-type="hash">#</a>
<a style="cursor:pointer;" name="B" data-type="product">Product B</a>
<select>
<option selected="selected" value="0"></option>
<option value="A">Spies</option>
<option value="B">Militia</option>
</select>
<input value="0" type="text">
Now in jQuery you will need to listen for the click event of the <a> tag:
$(document).ready(function(){
$('a').on('click', function (e) {
e.preventDefault();
var a_name = $(this).attr('name');
if ($(this).data('type') === 'hash') {
var answer = prompt('Type your selection', '');
$('select option').prop('selected', false);
$('select option[value="' + a_name + '"]').prop('selected', true);
$('input').val(answer);
} else if ($(this).data('type') === 'product') {
$('select option').prop('selected', false);
$('select option[value="' + a_name + '"]').prop('selected', true);
}
});
});
JSFIDDLE DEMO
Update since you showed me full code =)
HTML
<table id="someID">
<tr class="L1">
<td></td>
<td>1898, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[213][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1900, 2018
</td>
<td>9</td>
<td>Combat Outpost
</td>
<td>
<select name="struct[329][str]">
<option selected="selected" value="0"></option>
<option value="U2" data-price="4000">Blackshirts</option>
<option value="U3" data-price="6000">Spies</option>
<option value="U4" data-price="8000">Partisans</option>
<option value="U7" data-price="15000">Rebels</option>
<option value="U11" data-price="80000">Oerlikon Cannons</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2018
</td>
<td>9</td>
<td>Military Installation
</td>
<td>
<select name="struct[330][str]">
<option selected="selected" value="0"></option>
<option value="U1" data-price="1200">K-9 Corps</option>
<option value="U5" data-price="9000">Riflemen</option>
<option value="U6" data-price="11000">Sappers</option>
<option value="U8" data-price="24000">Jägers</option>
<option value="U9" data-price="27000">Commandos</option>
<option value="U10" data-price="33000">Red Berets</option>
<option value="U12" data-price="110000">Ford GPW</option>
<option value="U13" data-price="222000">M3 Half-tracks</option>
<option value="U14" data-price="350000">7TP</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
</td>
</tr>
<tr class="L2">
<td></td>
<td>1901, 2017
</td>
<td>9</td>
<td>Light Airfield
</td>
<td>
<select name="struct[331][str]">
<option selected="selected" value="0"></option>
<option value="U15" data-price="155000">PZL.23 Karaś</option>
<option value="U16" data-price="175000">R-4 Hoverfly</option>
<option value="U17" data-price="650000">PZL P.11</option>
<option value="U18" data-price="1050000">P-39 Airacobra</option>
<option value="U19" data-price="1500000">C-46 Commando</option>
</select>
</td>
<td>
<input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
</td>
</tr>
</table>
<hr />
<div id="quickChoice"> <a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Spies</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Blackshirts</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Riflemen</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">Sappers</a>
<br>
<a style="cursor:pointer;">#</a>
<a style="cursor:pointer;">R-4 Hoverfly</a>
</div>
jQuery
$(document).ready(function(){
$('div#quickChoice').on('click', 'a', function (e) {
// dont allow the <a> to perform its default functionality
e.preventDefault();
// get content of <a> tag
var contents = $(this).text();
// user clicked hash symbol
if (contents === '#') {
// get the contents of next available <a> tag
var select_choice = $(this).next('a').text();
// promp for number
var answer = prompt('Type your selection', '');
// go through table
// find any <selects> that have <options>
// filter options based on <a> contents next to hash
// make it selected
// for each matching <option> go to parent <td> and find the next <td> because we need to populate the <input> tag
// populate the <input>
$('table#someID')
.find('select')
.find('option')
.filter(function () {
if ($(this).text() === select_choice) {
return true;
} else {
return false;
}
}).prop('selected', true)
.each(function () {
$(this)
.parents('td')
.first()
.next('td')
.find('input[type="text"]')
.val(answer);
});
} else {
// user did not click hash but rather the text value
var select_choice = $(this).text();
// same as above but we don't have to populate the <input> at all
$('table')
.find('select')
.find('option')
.filter(function () {
if ($(this).text() === select_choice) {
return true;
} else {
return false;
}
}).prop('selected', true);
}
});
});
JSFIDDLE DEMO

Enabling a text box depending upon the selected value in a drop down

Hi I have an HTML page which has a text box and a dropdown box. When the page is loading for the first time, then depending upon the value in the drop down(Selected) the text box needs to be enabled or disabled. I want to do this using javascript or jquery. I need a little help.
<table>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type1" id="field_type">
<option value="TEXT" SELECTED="">TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" >DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
<tr>
<td class="td">
<input type="text" size="3" name="length21" value="0" disabled="disabled"/>
</td>
<td class="td">
<div class="type">
<select name="type2" id="field_type">
<option value="TEXT" >TEXT</option>
<option value="TEXTAREA" >TEXTAREA</option>
<option value="DROPDOWN" SELECTED="">DROPDOWN</option>
<option value="DATE" >DATE</option>
<option value="CHECKBOX" >CHECKBOX</option>
<option value="SEPARATOR" >SEPARATOR</option>
<option value="DATETIME" >DATETIME</option>
<option value="HIERARCHY" >HIERARCHY</option>
</select>
</div>
</td>
</tr>
</table>
Now what I want is, when the page loads, for the row where the drop down is having TEXT selected, the text box will get enabled. But not for the other. I would really appreciate any kind of help.
In jQuery:
$(document).ready(function(){
$('select').on('change',function(){
if($('select').val() == "TEXT") {
$(this).parents('td').siblings('td').children('input').removeAttr('disabled');
}
});
});
Changed Scott's code a bit so that it works on your load:
$(document).ready(function() {
$('select').each(function() {
var comboBox = $(this);
checkValue(comboBox);
comboBox.on('change', function() {
checkValue(comboBox);
});
});
});
function checkValue(comboBox) {
if (comboBox.val() == "TEXT") {
comboBox.parents('td').siblings('td').children('input').removeAttr('disabled');
}
else {
comboBox.parents('td').siblings('td').children('input').attr('disabled','disabled');
}
}​
Here's a fiddle btw: http://jsfiddle.net/BbStP/1

Categories