I'm fairly new to javascript and I'm trying to make an form for my website and I'm stuck on the javascript,
This is what I have:
<script type="text/javascript">
function hide(opt) {
if (getElementsByClassName(opt).style.display='none';){
getElementsByClassName(opt).style.display='block';
}
else{
getElementsByClassName(opt).style.display='none';
}
}
</script>
What I intended the script to do was recieve a variable (the option chosen by the user) and then reveal all the elements with the class of the same name (so if the option was orc the orc div would be displayed, but be hidden if the option chosen was elf etc.)
Html:
<form name="chargen" action="" method="post">
Name:<Input name="name" type="text" />
Gender:<select name="gender">
<option>Choose Gender...</option>
<option>Male</option>
<option>Female</option>
</select>
Species:<select name="species" onchange="hide(document.chargen.species.options[
document.chargen.species.selectedIndex ].value)">
<option> Choose Species...</option>
<option value="human">Human</option>
<option value="orc">Orc</option>
<option value="elf">Elf</option>
<option value="dwarf">Dwarf</option>
<option value="drow">Drow</option>
<option value="ent">Ent</option>
</select>
<div class="human" style="display:none;">
Sub Species:<select name="subspecies1">
<option>Norseman</option>
<option>Hellenic</option>
<option>Heartlander</option>
</select>
</div>
<div class="orc" style="display:none;">
Sub Species:<select name="subspecies2">
<option>Black Orc</option>
<option>Fel Orc</option>
<option>Green Orc</option>
</select>
</div>
<div class="human" style="display:none;">
Homeland:<select name="homeland1">
<option>Choose Homeland...</option>
<option value="citadel">Citadel</option>
<option value="wildharn">Wildharn</option>
<option value="Merith">Merith</option>
</select>
</div>
<div class="orc" style="display:none;">
Homeland:<select name="homeland2">
<option>Choose Homeland...</option>
<option value="1">Berherak</option>
<option value="2">Vasberan</option>
</select>
</div>
Unfortunately nothing happens when I change the contents of the species combobox (I've tried on multiple browsers) What am I doing wrong?
I realise that getElementsByClassName() is a HTML5 function, but according to the interwebs it is compatible with all major browsers.
Thanks for your time
getElementsByClassName returns an array, you must iterate on the result. And be careful to the = in tests (instead of ==).
But I suggest you have a look at jquery. Your life will be easier as what you want can be done as :
$('.human, .orc, .elf, .dwarf, .drow, .ent').hide();
$('.'+opt).show();
(see fiddle : http://jsfiddle.net/dystroy/2GmZ3/)
Related
I have a series of select parts of a form, the javascript hides multiple possibilities for the following dropdown until the current drop down has a selection made, this determines which dropdown the user sees using the style="display:none;" attribute and javascript to switch it to block, .css({'display':'block'});.
The problem is that each <select> segment has the same name, e.g. <select class="form-control" name='phylum' id="sel1_1" style="display:none;"> this name='phylum' is used in the post phase of the form and needs to be associated with whichever dropdown list is used, but all of these have the default as 0 so if this is set it is overwritten by the final select in the list.
In javascript I therefore need to disable the html code, switching display:none; to display:block; has no effect as it is style only. Could I add disabled to all the <select> elements and somehow activate the required one?
Some example html and javascript snippets follow.
html
<div class='col-12 left'>
<div class='form-group'>
<label id="sel1_0" style="display:none;" for='uname'>Phylum/Division</label>
<select class="form-control" name='phylum' id="sel1_1" style="display:none;">
<option value="phylum" data-value="0">Choose</option>
<option value="Annelid" data-value="1">Annelid</option>
<option value="Arthropod" data-value="2">Arthropod</option>
<option value="Bryozoa" data-value="3">Bryozoa</option>
<option value="Chordata" data-value="4">Chordata</option>
<option value="Cnidaria" data-value="5">Cnidaria</option>
<option value="Echinoderm" data-value="6">Echinoderm</option>
<option value="Mollusc" data-value="7">Mollusc</option>
<option value="Nematode" data-value="8">Nematode</option>
<option value="Platyhelminthes" data-value="9">Platyhelminthes</option>
<option value="Rotifer" data-value="10">Rotifer</option>
<option value="Sponge" data-value="11">Sponge</option>
</select>
<select class="form-control" name='phylum' id="sel1_2" style="display:none;">
<option value="0" data-value="0">Choose</option>
<option value="1" data-value="1">C1</option>
<option value="2" data-value="2">D1</option>
</select>
</div>
</div>
javascript
$("#sel0").change(function() {
$('#sel1_1').css({'display':'block'});
The following doesn't seem to work
$('#sel1_1').css({'active'});
This is related to HTML and JavaScript. I'm a newbie in HTML and JavaScript.
I have four DropDowns. The first two are dependent on each other. The next two are dependent on each other. The first two DropDowns work perfectly.
For e.g. if the option No school is selected, the second DropDown populates values as expected.
The same does not happen for the next two DropDowns. If No is chosen in the third DropDown, the fourth DropDown should populate a list.
This does not happen.
Please run the code to understand what is happening.
Thanks in advance.
Regards
David
The code is:
function dynamic_sch(listindex)
{
document.getElementById("subcategory").length = 0;
switch (listindex)
{
case "No_sch_att" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("subcategory").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
case "Spl_sch" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Only option available","Only option available");
document.getElementById("subcategory").options[2]=new Option("Could not adjust in mainstream school","Could not adjust in mainstream school");
document.getElementById("subcategory").options[3]=new Option("Denied admission in mainstream school","Denied admission in mainstream school");
document.getElementById("subcategory").options[4]=new Option("Parents preferred choice","Parents preferred choice");
document.getElementById("subcategory").options[2]=new Option("Non availability of escort/transport","Non availability of escort/transport");
document.getElementById("subcategory").options[2]=new Option("Not happy with progress quality in school","Not happy with progress quality in school");
break;
case "home_edn" :
document.getElementById("subcategory").options[0]=new Option("Please select reason","");
document.getElementById("subcategory").options[1]=new Option("Preferred choice","Preferred choice");
document.getElementById("subcategory").options[2]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("subcategory").options[3]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("subcategory").options[4]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("subcategory").options[5]=new Option("Cant travel long distance","Cant travel long distance");
break;
}
return true;
}
function dynamic_yn(listindex)
{
document.getElementById("sub_category").length = 0;
switch (listindex)
{
case "no_rec" :
document.getElementById("sub_category").options[0]=new Option("Please select reason","");
document.getElementById("sub_category").options[1]=new Option("Did not know what to do","Did not know what to do");
document.getElementById("sub_category").options[2]=new Option("Unable to provide escort","Unable to provide escort");
document.getElementById("sub_category").options[3]=new Option("Unable to adjust in school setting","Unable to adjust in school setting");
document.getElementById("sub_category").options[4]=new Option("Cant travel long distance","Cant travel long distance");
document.getElementById("sub_category").options[5]=new Option("Cant afford travel","Cant travel long distance");
break;
}
return true;
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<body>
<div style="display:inline-block">
<div class="category_div" id="category_div">
<label>School attended</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_sch(this.options[this.selectedIndex].value);">
<option value="">Select School attended</option>
<option value="No_sch_att">No school attended</option>
<option value="Incl_mainst">Inclusive Mainstream</option>
<option value="Spl_sch">Special School</option>
<option value="Int_spl_nrml">Integrated Spl+Normal</option>
<option value="home_edn">Home Education</option>
<option value="Opn_sch">Open Schooling</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category_div" id="sub_category_div">
<div class="category_div" id="category_div">
<label>Reason Why ?</label>
<select name="subcategory" id="subcategory" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="subcategory" id="subcategory"
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
<div style="display:inline-block">
<div class="category" id="category">
<label>Access to play</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_yn(this.options[this.selectedIndex].value);">
<option value="">Select Choice</option>
<option value="Yes_rec">Yes</option>
<option value="no_rec">No</option>
</select>
</div>
</div>
<div style="display:inline-block">
<div class="sub_category" id="sub_category">
<div class="category" id="category">
<label>Reason Why ?</label>
<select name="sub_category" id="sub_category" style="max-width:100%"><option value="">Please select reason </option></select>
<noscript>
<select name="sub_category" id="sub_category">
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
</div>
</body>
</html>
i checked your code , isssue is coming becuase for your last dropdown you have two elements having same id, hence the script is not updating the options
first one
<div class="sub_category" id="sub_category">
second one
<select name="sub_category" id="sub_category"
change the id for div and it should work
In HTML file id should be unique. In your code snippet you have multiple elements with same id. For example,
<div class="category" id="category">
<label>Access to play</label>
<select name="category" style="max-width:70%" class="required-entry" id="category" onchange="JavaScriptt: dynamic_yn(this.options[this.selectedIndex].value);">
<option value="">Select Choice</option>
<option value="Yes_rec">Yes</option>
<option value="no_rec">No</option>
</select>
</div>
In above code you have category as id to div and select. Change the id of div,
<div class="category" id="category_div">
Also this,
<div class="sub_category" id="sub_category">
<div class="category" id="category"> //This id should be removed
<label>Reason Why ?</label>
<select name="sub_category" id="sub_category" style="max-width:100%">
<option value="">Please select reason </option>
</select>
<noscript>
<select name="sub_category" id="sub_category">
<option value="">Please select reason</option>
</select>
</noscript>
</div>
</div>
In above code you have sub_category as id to div and select. Also you need to remove id="category" wchich is not necessory. Change the id of div,
<div class="sub_category" id="sub_category_div">
Demo
Note: You have added 2 select with same id in last block. If not needed you can remove one.
I'm working in Protractor and javasript. My page has 3 dropdowns of same class "imageeditor". I want to select the 2nd dropdown and click the option say "Package" by passing the text as parameter.I want the different xpath and css to perform the select option.
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
<div class="imageeditor">
<select class="form-control m-b-sm">
<option>Select Image Style</option>
<option value="image-panel">Panel</option>
<option value="image-package-panel">Package</option>
<option value="image-open-panel">Open</option>
</select>
</div>
You can get the desired select element by index:
var desiredImageEditor = $$(".imageeditor select").get(1);
Now, in order to select an option, you have multiple ways to do so. One is to select the inner option by the class name and click it:
var desiredOption = desiredImageEditor.$("option.image-package-panel");
desiredImageEditor.click(); // open up dropdown
desiredOption.click();
Or, it should also be possible to just send keys to the select element:
desiredImageEditor.sendKeys("Package");
There is also this convenient abstraction over select and option.
So I have a div that holds a dropdown list of items. I want the user to add more dropdown list's by pressing a button.
I managed this, but the problem I'm facing is that the new list gets appended after the button. I want the button to be always underneath the dropdown list.
I know that there is an option called insertBefore(), but I don't really know how to use it correctly in my case.
Oh and by the way, do you guys have any thoughts about how to give each new dropdown list a unique name? Because it is a form that I am planning on sending later on. I think I need to work with counters in my script file, but I om not sure yet.
So the HTML:
<form role="form" class="contact-form" id="contact-form" method="post">
<div class="form-group">
..not important for the question...
</div>
<div class="form-group">
<div class="controls" id="dropdown_item">
<select class="offerte_product" name="product_1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input id="add_option" type="submit" value="Add More" onclick="return false" />
</div>
</div>
<div class="form-group">
..not important for the question...
</div>
And the script I am using is:
<script>
$(function(){
$('#add_option').on('click',function(){
var r= $('<select class="offerte_product" name="product_2"> <option value="volvo">Volvo</option> </select> ');
$("#dropdown_item").append(r);
});
});
So do I need to put insertBefore somewhere before the append(r)? I really have no clue.
Just put the button outside the div:
<div class="controls" id="dropdown_item">
<select class="offerte_product" name="product_1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<input id="add_option" type="submit" value="Add More" onclick="return false" />
You can keep appending to the div and the button will still be below it.
I created fiddle for this question.You can create different name according to product group ID.
$(function(){
var productGroupID=1;
$('#add_option').on('click',function(){
productGroupID+=1;
var r= $('<select class="offerte_product" name=product_'+productGroupID+'> <option value="volvo">Volvo</option> </select> ');
$("#dropdown_item").append(r);
});
});
https://jsfiddle.net/ypaudyal/15jt7tLf/
But If you are posting to the server, I suggest you to use same name and collect the selected values in collection.
Does anyone know how to autoselect in a selectbox? I want to do is even though there is a blank option the selectbox will still show the option that has a value on it.
Does anyone know how to do it in jquery?
html code:
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age">
<option></option>
<option>16</option>
</select>
May this help you :
HTML:
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age" id='some'>
<option></option>
<option>16</option>
</select>
Jquery:
$($('#some').children()[1]).attr('selected',true)
If you have more than one empty option, and there is no order, this is the best solution I think: jsFiddle Live Demo
What we've done here is, checking every selectbox by a each loop:
$('select').each(function()
{
});
And then inside the loop we find the first option which is not empty:
$(this).find('option:not(:empty)').first()
And make it selected by prop:
$(this).find('option:not(:empty)').first().prop('selected',true);
So the whole jQuery and Html will be:
jQuery
$('select').each(function()
{
$(this).find('option:not(:empty)').first().prop('selected',true);
});
HTML
<select name="name">
<option></option>
<option>Mark</option>
</select>
<select name="age">
<option></option>
<option>16</option>
<option>20</option>
<option></option>
<option>55</option>
<option></option>
</select>
If you want to do this to all select boxes on the page, use this:
$(function () {
$('select').each(function () {
$(this).find('option').not(':empty()').first().attr('selected', true);
})
});
It grabs each select, finds the first option that is not empty (read: has text inside it) and sets the selected attribute.
See the fiddle.
No need for javascript to do this, if you want to select (Mark) for example, do it like this
<select name="name">
<option></option>
<option selected>Mark</option>
</select>
and in XHTML:
<select name="name">
<option></option>
<option selected="selected">Mark</option>
</select>