Hi i have following problem. I want that the user picks an option of a select panel. Then after he clicks the button he is taken to another file where the value of his choice is put in a variable and then displayed. It is important that its opened in a new file. But with my code the variable returns undefined. Here is my Code:
function myFunction() {
a=$("#mySelect").val();
switch(a){
case "Orange":
var b="Orange";
return b;
case "Apple":
var b="Apple";
return b;
case "Pineapple":
var b="Pineapple";
return b;
case "Banana":
var b="Banana";
return "Banana";
}
}
var test=myFunction();
$("button").on("click",blub);
function blub(){
window.open(
"/Users/Adrian/Desktop/jj.html",
'_blank'
);
}
<!DOCTYPE html>
<html>
<body>
<select id="mySelect">
<option value="Apple">
Apple
</option>
<option value="Orange">
Orange
</option>
<option value="Pineapple">
Pineapple
</option>
<option value="Banana">
Banana
</option>
</select>
<p class="bla">
Click the button to select the option element with index "2".
</p>
<p>
<b>
Note:
</b>
The index starts at 0.
</p>
<button>
Try it
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script charset="utf-8" src="j.js">
</script>
<script charset="utf-8" src="jj.js">
</script>
</body>
</html>
$(".bla").html(test);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p class="bla"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="j.js" charset="utf-8"></script>
<script src="jj.js" charset="utf-8"></script>
</body>
</html>
You should only get the value of the select once the button is clicked, not on page load. Then, you can set it in the sessionStorage so that the other page can access it.
JavaScript for first page:
$("button").on("click", blub);
function blub() {
sessionStorage.setItem("value", $('#mySelect').val());
window.open(
"/Users/Adrian/Desktop/jj.html",
'_blank'
);
}
JavaScript for the second page:
$(".bla").text(sessionStorage.getItem('value'));
Related
I am new to coding so sorry if there is a blatant mistake I am missing. I made sure both files are in the same folder. I linked the js file to the HTML file using the correct path. I made sure my browser has JS enabled for websites. The code works in fiddle but does not work locally.
Java script
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<html>
<body>
<script type="text/javascript" src="app.js" charset="utf-8"></script>
<select id="brands">
<option value="trane">trane</option>
<option value="brand2">brand2</option>
<option value="brand3">brand3</option>
</select>
<input id="txtField" type="text" name="b">
<button onClick="check();">submit</button>
<div id="result"></div>
</body>
</html>
HTML
var brands = {
"trane": tonnageTrane,
"brand2": {},
"brand3": {}
}
var tonnageTrane = {
"18": 1,
"24": 2,
"30": 2.5,
"36": 3,
"42": 3.5,
"48": 4
}
function check() {
var select = document.getElementById('brands');
var value = select.options[select.selectedIndex].value;
var inp = document.getElementById('txtField').value;
document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
}
edit: added the text version of code
You should write your code as below when posting a question or answer.
Your code repeats its HTML tag twice, your script tag should be in the head, and tonnage should be above brands since tonnage is used in it - regardless though your code should work. Your issue is most likely that your JavaScript file is not in the same folder as your HTML file. You can also use the HTML I made from yours below just in case there is a syntax issue I did not see; I tested the code and it works fine. When debugging your JavaScript code, you should use the console of the web browser; it will show you the errors.
JS:
var tonnageTrane = {
"18": 1,
"24": 2,
"30": 2.5,
"36": 3,
"42": 3.5,
"48": 4
}
var brands = {
"trane": tonnageTrane,
"brand2": "brand2test",
"brand3": "brand3test"
}
function check(){
var select = document.getElementById('brands');
var value = select.options[select.selectedIndex].value;
var inp = document.getElementById('txtField').value;
document.getElementById('result').innerHTML = brands[value][inp.substring(4, 6)];
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<select id="brands">
<option value="trane">trane</option>
<option value="brand2">brand2</option>
<option value="brand3">brand3</option>
</select>
<input id="txtField" type="text" name="b">
<button onClick="check();">submit</button>
<div id="result"></div>
</body>
</html>
You have a few problems. First you have two opening <HTML> tags. Next, you are missing a <head> tag.
As for your script, you either need to link to the JS file LAST inside of the body tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
Your HTML Here
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</body>
</html>
Or within the head tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</head>
<body>
Your HTML Here
</body>
</html>
I have this snippet below
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>
</body>
</html>
Above snippets looks fine, but i am getting trouble when the option where selected from the first when the page loaded. I have to click the different button to make the hide function works. I solved that problem by adding the if ... else in my code so that when the page loaded the hide function will run properly.
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
if($("#selectTest").val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
})
Above code looks not appropriate because i have to repeat the function that i have made, is there any better way to resolved this problem ?
Instead of writing code twice, you can trigger the event (change) using jQuery's .trigger():
$("#selectTest").trigger('change');
Working Code Example:
$(document).ready(function(){
$("#selectTest").change(function(e){
if($(this).val() == "01"){
$(".show").hide();
}else{
$(".show").show();
};
});
$("#selectTest").trigger('change');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show">
Sample Text
</div>
<select name="test" id="selectTest">
<option value="00"></option>
<option value="01">Click this to hide text</option>
<option value="02">Click this to show text</option>
</select>
I am using the multiple fastselect. I can't seem to get the refresh to work. What I mean by that is I need to be able add a new option to the list after selecting items from the dropdown list.
If I click the add button1 the first time it works. When I select an item from the list and then click the add button1 again to add to the list the add no longer works.
Any suggestions on what I might be doing wrong?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/fastselect.min.css">
<script src="js/jquery_2.1.1.js"></script>
<script src="js/fastselect.standalone.min.js"></script>
<style type="text/css">
.fstResultItem .fstSelected {
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h2>Multiple Select</h2>
<div>
<select id="example2" class="example2" multiple="multiple">
<option value="test1">C1</option>
<option value="test2">C2</option>
<option value="test3">C3</option>
<option value="test4">C4</option>
<option value="test5">C5</option>
<option value="test6">C6</option>
<option value="test7">C7</option>
<option value="test8">C8</option>
<option value="test9">C9</option>
</select>
<div>
<button id="button1">Add Item Set 1</button>
<button id="button2">Add Item Set 2</button>
<button id="rebuild">Rebuild</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#example2').fastselect({});
$('#button1').click(function () {
//alert('button1 click');
$('#example2').append('<option value="add1">Addition 1</option>');
setTimeout(function () {
$('#example2').fastselect();
}, 500);
});
$('#button2').click(function () {
//alert('button2 click')
$('#example2').append('<option value="add1">Addition 1</option>');
});
$('#rebuild').click(function () {
alert('rebuilding');
$('#example2').fastselect();
});
});
</script>
</body>
</html>
The initial options of the select are copied to a hidden div when calling .fastselect() (you can check that with the developer tools). Later additions to the options are not reflected in the copy.
A possible solution would be to remove fastselect from the select and then add it again:
$('#example2').append('<option value="add1">Addition 1</option>').data('fastselect').destroy();
$('#example2').fastselect();
Line one adds the new select option and then destroys the fastselect instance and line two initializes it again.
I don't understand why the following isn't changing the select's background color. It's probably something simple, but I can't see it. I'm using Notepad++ editor with Chrome and Opera browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debugging</title>
<style >
select {
background-color: #FF0000;
}
</style>
<script>
function myFunction() {
document.getElementById('slct').style.backgroundColor = #FFFFFF;
}
</script>
</head>
<body>
<select id="slct">
<option>Choose</option>
<option>The First Choice</option>
<option>The Second Choice</option>
</select>
<input type="button" onclick="myFunction()" value="Click Me!">
</body>
</html>
Check your browser's console, you might be getting errors. Background-color value must be in quotes.
document.getElementById('slct').style.backgroundColor = "#FFFFFF";
I want my dropdown list to return to its first value after page refresh.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>
<li><label>Type2</label>
<select id="sss">
<option selected id="one1">ONE</option>
<option id="two2">TWO</option>
</select><br></li>
</div>
<script>
document.getElementById('sss').selectedIndex=0
</script>
</body>
</html>
It works in Firefox but not in IE10. Can anybody please help?
Solved it! I had to force the script to run after the page is loaded.
<!DOCTYPE html>
<html>
<head>
<script>
function loaded() {document.getElementById('sss').selectedIndex=0;}
</script>
</head>
<body onload="loaded()">
<div>
<li><label>Type2</label>
<select id="sss">
<option id="one1" SELECTED>ONE</option>
<option id="two2">TWO</option>
</select><br></li>
</div>
</body>
</html>