I think I'm going to be able to post an answer to this in a few minutes...
Here's an example:
<script>
function ClearAndRunFuncs(element) {
//Clears answers to elements that are AFTER this element that HAVE an onchange
//Runs the unique onchange function to EACH element after clearing the answer
}
function FuncA(element) {
//does stuff
}
function FuncB(element) {
//does different stuff
}
function FuncC(elements) {
//does different stuff
}
function FuncD(element) {
//does different stuff
}
</script>
<select name=YesNo onchange="FuncA(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<input name=RandomInputA>
<select name=SomeOtherSelect onchange="FuncB(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<select name=AnotherSelect onchange="FuncC(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
<br>
<input name=RandomInputB onchange="FuncD(this)">
<select name=LastSelect onchange="FuncE(this);ClearAndRunFuncs(this)">
<option value="">Please Select</option>
<option>Yes</option>
<option>No</option>
</select><br>
I want to reset the answers to element's that appear after the initial element is changed and run their corresponding functions (ClearAndRunFuncs(this);).
If you'd like a reason why, this type of code would help me to give a user a list of questions, and if they happen to answer them out of order, it would force them to re-answer questions that may branch in a different direction without needing to re-answer some fields that don't affect branching.
If you answer this with jquery, I'd appreciate extra details on whats happening since I'm new to jquery. The best answer would ideally have both javascript and jquery solutions with a detailed explanation of the jquery. Thanks everybody!
What I ended up using:
function ClearAndRunFuncs(element) {
var str = element.nextSibling;
var inputTypes = ["INPUT", "SELECT"];
while(str.name != "Stop") {
if(inputTypes.indexOf(str.tagName) > -1) {
if(str.onchange != null) {
str.value="";
str.onchange();
}
}
var str = str.nextSibling;
}
}
at the end of my script I wrote a <input name=Stop type=hidden> to stop the while loop.
Related
I'm pretty much brand new to JS, and working on a small web page to teach myself a little bit. I feel like this would have been answered before, but I don't know how to word it better to find it.. sorry!
basically, I have two templates set up in HTML, for two select boxes, which will be re-used quite a few times across the form. then I have a function that is called Onchange for select 1, and will change what is visible in select 2, I managed to reference select 1 with (this), but I'm completely at a loss as to how to reference the second one.
function myFunction(selectObject)
{
if (selectObject.value == 'option1')
{
//code to reference Select2 here
option3.disabled = true;
option3.style.display = "none";
}
}
<template id="Select1">
<select name="Select1" onchange="myFunction(this)">
<option value="option">option</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</template>
<template id="Select2">
<select name="Select2" >
<option value="option3">option</option>
<option value="option4">option1</option>
<option value="option5">option2</option>
</select>
</template>
thanks for any help!
Something like this? I am not sure why are you using template tags.
function myFunction()
{
var select1 = document.querySelector("#Select1>select");
var select2 = document.querySelector("#Select2>select");
var option3Visible = select1.value != 'option1';
var option3 = select2.querySelector("option[value='option3']");
option3.disabled = !option3Visible;
option3.style.display = option3Visible ? "inline" : "none";
}
<div id="Select1">
<select name="Select1" onchange="myFunction()">
<option value="option0">option0</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
</div>
<div id="Select2">
<select name="Select2" >
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</div>
Basically you need to get familiar with events, dom query API and possibly CSS selectors.
If you're using templates, you need to search inside content property of the corresponding template:
let t1 = document.querySelector('#Select1');
let t2 = document.querySelector('#Select2');
// there are many ways how to select an element, here simple element selector is used
let select1 = t1.content.querySelector('select');
let select2 = t2.content.querySelector('select');
let option3 = t1.content.querySelector('[value=option3]');
// add event listener is preferred to your `onchange` attribute binding
select1.addEventListener('change', function() {
// modify select2 here
option3.disabled = true;
option3.style.display = "none";
});
I have a drop down list, which is within a pop modal. The drop-down list looks like this:
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
And my jquery looks like this:
$("body").on("change", "#ddlEventType", function (e) {
var test = $('#ddlEventType').val();
});
It hits the onchange function no problem, but whenever I select an option on the ddl, the test variable is always "", never gets the value. Can anyone help me with what's going wrong here? Is it because the ddl is inside a modal popup? I actually have a ddl in a different modal popup, with the exact same code and it works completely as it should. There's no conflicting ids on the age either. Can't figure out why I'm not getting the value.
UPDATE
I gave the ddl a class name of ddlEventType, and changed the jquery to
$("body").on("change", "#ddlEventType", function (e) {
var test = $('.ddlEventType').val();
});
and for some reason this worked. Don't get why, but it works and that's all I need. Thanks for your help everyone.
Try this:
$(document).on('change','#ddlEventType',function(){
console.log($(this).val());
});
Are you doing any change to the body. And for preventDefault it should be e.preventDefault();
You can follow the below methods for obtaining the selected value from the select tag using the onchange() attribute.
First method i have called the onchange() directly to the script function.
Second Method i have given directly a function to the select tag and then called the function in the script file.
First Method:
$(document).ready(function(){
$("#ddlEventType").change(function(){
alert($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Second Method:
function get_value(a)
{
alert(a);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="EventTypeId" class="form-control formTextBox" id="ddlEventType" onchange="get_value(this.value)">
<option value="">Please Select</option>
<option value="1">Assessment</option>
<option value="2">Single Session</option>
<option value="3">Group Session</option>
</select>
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
My website is created in ASP classic - VBScript (not my choice and is a language I've not had experience with before this). I'm trying to create a webpage where in it: A dropdown menu reveals an additional dropdown based on what was selected in the first one. I'm trying to use a javascript function to achieve this.
Example:
In the first dropdown the user chooses ice cream or crisps.
Based on what the user selects another dropdown gives the choice of flavour.
Ice cream: vanilla, chocolate, mint.
Crisps: ready salted, cheese & onion, salt & vinegar.
This is what my code currently looks like:
HTML
<select id="food" onchange="fctCheck(this.value)">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
.
javascript
function fctCheck(food)
{
if (food == "")
{document.getElementById(food).style.display = "none";}
else
{document.getElementById(food).style.display = "block";}
}
as mentioned by st3inn this.value is absolutely fine - there is just the typo by document.getElement==>B<==yId.
But your code has the disadvantage, that a user could select both options and so both sub-selections would be visible.
You could avoid this by first hiding all sub-selections before showing the one for the selected item. This could be done that way (via the addiotional name-attribute, or, if you choose to work with jQuery you could do something more sophisticated instead):
Example (with comments) on JSFiddle
Javascript:
function fctCheck(food) {
var elems = document.getElementsByName("subselector");
for (var i = 0; i < elems.length; i++) {
elems.item(i).style.display = "none";
}
document.getElementById(food).style.display = "block";
}
HTML:
<select id="food"onchange="fctCheck(this.value);">
<option value="">Choose an item</option>
<option value="icecream">Ice cream</option>
<option value="crisps">Crisps</option>
</select>
<select id="icecream" name="subselector" style="display:none">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="mint">Mint</option>
</select>
<select id="crisps" name="subselector" style="display:none">
<option value="readysalted">Ready Salted</option>
<option value="cheeseandonion">Cheese and Onion</option>
<option value="saltandvinegar">Salt and Vinegar</option>
</select>
Cheers,
Florian
You need to check for option value instead:
fctCheck(this.options[ this.options.selectedIndex ].value)
this.options is collection of <option> elements inside your current <select>, and this.options.selectedIndex is integer value that show what option currently selected.
BTW you have an typo in your code:
document.getElementbyId
should be
document.getElementById
See jsFiddle demo
You just have a typo.
function fctCheck(food)
{
if (food == "") {
document.getElementById(food).style.display = "none";}
} else {
document.getElementById(food).style.display = "block";
}
}
should work.
this.value
is equivalent to
this.options[this.options.selectedIndex].value
I have three select boxes, that the user would choose in terms of priority. I have used sport for this example. At present I've set the css to hide the 2nd and 3rd priority selects until the first box has been completed and so on.
The issue I have is that as the values are all duplicate, i'd like to disable selection, IE. If a user selects "Golf", then this should be disabled in priority2, and priority3. In addition if a user selects "Football" for priority2 then both "Golf" and "Football" should be disabled.
HTML:
<form>
<table>
<tr><td>
<label for="Priority">Please state your priorities</label></td><td>1st PRIORITY
<select class="formSelect" name="priority1" onChange="p1(priority1);" onClick="p1(priority1);" width="175px" id="priority1" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>2nd PRIORITY
<select name="priority2" class="chidden" onChange="p2(priority2);" onClick="p2(priority2);" width="175px" id="priority2" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
<td>3rd PRIORITY
<select name="priority3" class="chidden" width="175px" id="priority3" size="1" tabindex="22";>
<option value="0">No Preference</option>
<option value="1">Football</option>
<option value="2">Golf</option>
<option value="3">Tennis</option>
<option value="4">Boxing</option>
</select>
</td>
</tr>
</table></form>
CSS:
.chidden {visibility: hidden;}
.cvisible {visibility: visible;}
Javascript:
var priority1 = document.getElementById("priority1");
var priority2 = document.getElementById("priority2");
var priority3 = document.getElementById("priority3");
function p1(priority1) {
if(document.getElementById("priority1").selectedIndex > 0){
document.getElementById("priority2").className="cvisible";
}
else{
document.getElementById("priority2").className="chidden";
document.getElementById("priority2")[0].selected = "1";
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
function p2(priority2) {
if(document.getElementById("priority2").selectedIndex > 0){
document.getElementById("priority3").className="cvisible";
}
else{
document.getElementById("priority3").className="chidden";
document.getElementById("priority3")[0].selected = "1";
}
}
Apologies for the quality of code, its only a start at the moment. I have tried to use the following to disable selection but not sure how to implement it. I would be grateful for any help with this (in Javascript);
//for (var i=0; i< document.getElementById("priority2").length; i++){
//if(document.getElementById("priority1").selectedIndex == document.getElementById("priority2")[i]){
// document.getElementById("priority2")[i].disabled = true;
//}
//}
If you have the all select boxes with same class name and calling a function
onchange=sel_box(this.value) you can use following
$('.chidden option[value="'+opt+'"]').attr("disabled", true);
here opt is option that you passed to sel_box() function
I don't think you can set options as visible/hidden in css, but you can disable them.
See: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled
EDIT
100% wasn't questioning that. Was only concerned about your method of hiding/showing.
This should do what you're looking for
http://jsfiddle.net/RaBuQ/1/
Actually just realized there is a bug. See if you can get it. If not I'll update in a bit.
EDIT 2
This should get you what you need. http://jsfiddle.net/RaBuQ/5/
EDIT 3
This isn't pure javascript (still jQuery), but I wanted the answer to be complete to your spec. If I have time, I may re-visit with a pure javascript answer, but don't wait for me. If you get it working, make sure you post the answer to your own question. Good luck!
http://jsfiddle.net/RaBuQ/8/