Got a form with a div dropdown which when select will display/hide another div.
<div>
<select id="currency" name="currency" onChange="display_payroll_div(this.selectedIndex);">
<option value="0">Currency for your quote*</option>
<option value="AUD">AUD</option>
<option value="USD">USD</option>
<option value="Pounds">GBP</option>
</select>
</div>
<div id="payroll-div">
<select id="report-payroll" name="report-payroll">
<option value="0">Would you like us to do payroll?*</option>
<option value="1">Yes, I would like payroll</option>
<option value="2">No, I don't need payroll</option>
</select>
</div>
Javascript:
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
}
}
The display/hide is fine but the issue I have is when I select 'AUD' and 'Yes, I would like payroll' and then change my mind and change to 'USD' the hidden field payroll will still keep the value of 'Yes,...'. Is there anyway to reset 'payroll-div' to default value?
All suggestions I've seen uses 'onClick' which I'm trying to avoid as it does not work in FF. Any help would be appreciated :)
Reference: Reset the Value of a Select Box
add this in your code:
else
{
document.getElementById('report-payroll').selectedIndex = 0;
//reseting value when currency_value != 'AUD'
}
DEMO
Try this:
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
}
else {
document.getElementById('report-payroll').selectedIndex = 0;
}
}
Working jsFiddle Demo.
Change the function like below
function display_payroll_div(e){
currency_value=document.getElementById('currency').value;
document.getElementById('payroll-div').style.display = "none";
if (currency_value == 'AUD') {
document.getElementById('payroll-div').style.display = "block";
} else {
document.getElementById('report-payroll').value ='0';
}
}
JSFiddle Demo
You can use
document.getElementById('report-payroll').options[0].selected = true;
I suggest this:
JSFIDDLE
1) unobtrusive
2) can handle a reload
<select id="currency" name="currency">
using
window.onload=function() {
document.getElementById("currency").onchange=function(){
var currency_value = this.value,
payrollDiv = document.getElementById('payroll-div');
payrollDiv.style.display = currency_value=="AUD"?"block":"none";
if (currency_value!="AUD") document.getElementById("report-payroll").selectedIndex=0;
}
document.getElementById("currency").onchange(); // hide or show when loading
}
Related
I have a simple selection dropdown that looks like this:
Criteria: <select name="criteriaon" id="criteriaon" onchange ="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
and a javascript that will pop up a confirmation box only if the user chooses OFF.
<script>
function myfunction(){
if (this.value === '0'){
confirm("Are you sure you want to turn off?");
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
</script>
Right now what happens is that the selection will remain as OFF regardless of the user chose Yes or No. Is there a way to reset the selection to ON if the user chooses "No" on the pop-up confirmation box? Thanks in advance.
this way
ps: remove
--> onchange ="myfunction(this.form)"
because you are already using :
document.getElementById('criteriaon').addEventListener('change', myfunction);
document.getElementById('criteriaon').addEventListener('change', myfunction);
function myfunction() {
if (this.value === '0') {
if (!confirm("Are you sure you want to turn off?") ) {
this.value = '1'
}
}
}
Criteria:
<select name="criteriaon" id="criteriaon" >
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
You can simply set the value of select to 1 by doing this.
this.value = '1';
function myfunction(){
if (this.value === '0'){
const result = confirm("Are you sure you want to turn off?");
if (!result) {
this.value = '1';
}
}
}
document.getElementById('criteriaon').addEventListener('change', myfunction);
Criteria: <select name="criteriaon" id="criteriaon" onchange="myfunction(this.form)">
<option value="1">ON</option>
<option value="0">OFF</option>
</select>
i have a selection list that contains for example countries :
<select id="Countries" name="Countries" onChange="check();">
<option id="Countrie1" name="Countrie1">Country 1</option>
<option id="Countrie2" name="Countrie2">Country 2</option>
</select>
I want to use Javascript to hide and show another select list (Teams list) depending from the selected element of the countries select list.
For example if Country 1 is selected then show the teams' selection list of Country 1
<select id="Teams_Country_1" name="Teams_Country_1">
<option id="C1_Team1" name="C1_Team1">Team_1_Country_1</option>
<option id="C1_Team2" name="C1_Team2">Team_2_Country_1</option>
</select>
if Country 2 is selected then hide the first one and show the second one in the same position.
<select id="Countries" name="Countries">
<option id="C2_Team1" name="C2_Team1">Team_1_Country_2</option>
<option id="C2_Team2" name="C2_Team2">Team_2_Country_2/option>
</select>
This is the code I am trying to modify to make it work.
function check() {
var el = document.getElementById("Countries");
var str = el.options[el.selectedIndex].text;
if (str == "Countrie1") {
showTeamsC1();
hideTeamsC2();
} else if (str == "Countrie2") {
showTeamsC2();
hideTeamsC1();
}
}
function hideTeamsC1() {
document.getElementById('Teams_Country_1').style.visibility = 'hidden';
}
function showTeamsC1() {
document.getElementById('Teams_Country_1').style.visibility = 'visible';
}
function hideTeamsC2() {
document.getElementById('Teams_Country_2').style.visibility = 'hidden';
}
function showTeamsC2() {
document.getElementById('Teams_Country_2').style.visibility = 'visible';
}
But this dosen't show the select list in the same position, and if I do it manually (try to use margin-top) it covers the other list.
You need to use display: none; instead of visibility:hidden;
What is the difference between visibility:hidden and display:none?
Visibility hidden is hiding the element but keep its space, but display:none; hide it without keeping its space.
So your code will be something like this:
function hideTeamsC1() {
document.getElementById('Teams_Country_1').style.display = 'none';
}
function showTeamsC1() {
document.getElementById('Teams_Country_1').style.display = 'block';
}
function hideTeamsC2() {
document.getElementById('Teams_Country_2').style.display = 'none';
}
function showTeamsC2() {
document.getElementById('Teams_Country_2').style.display = 'block';
}
I'm not that familiar with JavaScript. What I was doing so far was to hide a part of my form (see below: "Memo"), when someone changed an input-text-field via onchange (field-name: "ordernumber").
Therefore I'm using this funktion:
<script language="JavaScript" type="text/javascript">
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true) dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Meno").style.display = "inline";}
}
</script>
This works pretty fine, but now I'd like to add another condition from a dropdown (select option). In other words: When you change ordernumber AND select a certain option, "Memo" should disappear. I tried a lot, but I can't get it to work properly. This was my latest try:
function takeawayfield()
{ dok=0;
if (document.getElementById("ordernumber").changed == true && document.getElementById("system").value == "sys1") dok=1
if (dok==0)
{document.getElementById("Memo").style.display = "none";}
else
{document.getElementById("Memo").style.display = "inline";}
Two things are not working right with this one: It performs when only one of the conditions is true (although I used &&) and it seems to be unrelevant which option from the dropdown ist selected. Right now it performs with every option, but it should only perform with "sys1".
BTW: I added onchange="javascript:takeawayfield()" to both of the affected form-elements (input text and select option). I guess that's right?
What am I doing wrong?
Thanks in advance!
EDIT:
Here are the html-tags:
<input type="text" name="ordernumber" id="ordernumber" value="<?php echo htmlspecialchars($ordernumber); ?>" onchange="javascript:takeawayfield()">
<select name="system" id="system" onchange="javascript:takeawayfield()">
<option value="sys1">System 1</option>
<option value="sys2">System 2</option>
<option value="sys3">System 3</option>
</select>
Try this:
var dok = 0,
initialValue = "",
ordernumber = null,
system = null,
memo = null;
window.onload = function() {
// get dom objects
ordernumber = document.getElementById("ordernumber");
system = document.getElementById("system");
memo = document.getElementById("Memo");
// set initial value
initialValue = ordernumber.value;
};
function takeawayfield() {
if (ordernumber.value != initialValue && system.value == "sys1") {
dok = 0;
memo.style.display = "none";
} else {
dok = 1;
memo.style.display = "inline";
}
};
jsFiddle
If you want to react to changes by the user after the page has loaded you could listen to the keyup event of the input box and the dropdown.
Here's an example:
window.onload = function() {
document.getElementById("ordernumber").addEventListener('keyup', takeawayfield, false);
document.getElementById("system").addEventListener('change', takeawayfield, false);
function takeawayfield()
{
if (document.getElementById("system").value == "sys1") {
toggleMemo(false);
}
else {
toggleMemo(true);
}
}
function toggleMemo(show) {
var memo = document.getElementById("Memo");
if (show) {
memo.style.display = "inline";
}
else {
memo.style.display = "none";
}
}
};
http://jsfiddle.net/je5a7/
If your dropdown (select/option) have values in the option tag then the code below should be work fine. (after the user selects)
The select for example:
<select id="system">
<option value="sys1">system 1</option>
</select>
Your code
document.getElementById("system").value == "sys1"
OR you change your code:
if (document.getElementById("ordernumber").changed == true) dok=1;
else dok=0;
if (document.getElementById("system").value == "sys1") dok=1
else dok=0;
I need to be able to hide an image that appears when clicking on an option within a select field ONLY if the value="" (nothing inside quotes). If the value="some_url" inside the option, then I want the image to show.
I have used the following code to SHOW the image when an option is clicked. But when using onClick, it shows the image even if the option value="".
Here is the Javascript I'm using:
function showImage() {
document.getElementById('openimg').style.display = 'block';
Here is the html:
<select name="" >
<option value="url" onclick="showImage();">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
I only inserted one onClick command inside one option, just to show that it works. It seems I need an if statement to "show if" or "hide if" along with the onClick command within each option.
this is how I would do it:
<script type="text/javascript">
function showImage()
{
var choice = document.getElementById('myDropDown').value;
if(choice.length > 0)
{
document.getElementById('openimg').style.display = 'block';
}
else
{
document.getElementById('openimg').style.display = 'none';
}
}
</script>
<select id="myDropDown" onchange="showImage()">
<option value="url">Some_option_1</option>
<option value="">Some_option_2</option>
<option value="">Some_option_3</option>
</select>
<a href='url_2'><img src='images/some_img.jpg' id='openimg' style='display:none'></a>
Um, are you asking how to use an if or how to determine what is selected?
First of all, use onchange event in the dropdown.
This is the LONGHAND way of doing it for illustration purposes.
function onChange(){
var mySelect = document.getElementById("my-select");
var selectedValue = "";
for( var i = 0; i < mySelect.length;i++){
if( mySelect[i].selected)
selectedValue = mySelect[i].value;
}
if( selectedValue == "whatever")
{
//do something
}
if( selectedValue == "ugh")
// do something else
}
How do you take a value of an option in a select form and use it for a if else statement?
for example if apple is selected as an option then write to the document how to make applesauce but orange is selected then write how to make orange?
so far I have a basic form and select options and I know how to do the document.write but I dont know how to use a select form with if else
thanks for the help
First, make sure you have an id on your <select> allowing you to reference it from Javascript:
<select id="fruits">...</select>
Now, you can use the options and selectedIndex fields on the Javascript representation of your <select> to access the current selected value:
var fruits = document.getElementById("fruits");
var selection = fruits.options[fruits.selectedIndex].value;
if (selection == "apple") {
alert("APPLE!!!");
}
var select = document.getElementById('myList');
if (select.value === 'apple') {
/* Applesauce */
} else if (select.value === 'orange') {
/* Orange */
}
Your HTML markup
<select id="Dropdown" >
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
</select>
Your JavaScript logic
if(document.getElementById('Dropdown').options[document.getElementById('Dropdown').selectedIndex].value == "Apple") {
//write applesauce
}
else {
//everything else
}
Alternatively you can do this.
var fruitSelection = document.formName.optionName; /* if select has been given an name AND a form have been given a name */
/* or */
var fruitSelection = document.getElementById("fruitOption"); /* If <select> has been given an id */
var selectedFruit = fruitSelection.options[fruitSelection.selectedIndex].value;
if (selectedFruit == "Apple") {
document.write("This is how to make apple sauce....<br />...");
} else {
}
//HTML
<!-- For the 1st option mentioned above -->
<form name="formName">
<select name="optionName> <!-- OR -->
<select id="optionName">
<option value="Apple">Apple</option>
<option value="Pear">Pear</option>
<option value="Peach">Peach</option>
</select>
</form>