This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
I am very new at HTML/CSS/JavaScript, and I was wondering how I would use a variable that I declared in HTML, and do something with it in JavaScript. In the code below, I created a selection box, and I want to output a message using something along the lines of "if(...) then alert("")". How would I do the equivalent of
if(value == "chrome") {alert("you are using Chrome");}
"Value" is in HTML, but the comparison would be done in JS. Here is the code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Hello, Internet!</title>
</head>
<body>
<h1>
<p>Webstorm</p>
</h1>
<h2>
<p>Browser ID</p>
</h2>
<h3>
<p>Select which browser this is running on:</p>
<select>
<option>[Select Browser]</option>
<option value = "chrome">Chrome</option>
<!--How would I use "value"? -->
<option value = "firefox">Firefox</option>
<option value = "IE">InternetExplorer</option>
</select>
</h3>
</body>
</html>
You can always assign the option with an id and then using javascript to read the selected value as a variable
<select id="example">
<option>[Select Browser]</option>
<option value = "chrome">Chrome</option>
<!--How would I use "value"? -->
<option value = "firefox">Firefox</option>
<option value = "IE">InternetExplorer</option>
</select>
Your Javascript
var x = document.getElementById("example").selectedIndex;
console.log(x);
You can replace the line of <select> with the following:
<select onchange="if(this.options[this.selectedIndex].value == 'chrome') {alert('you are using Chrome?');} " >
It will only alert "you are using Chrome?" when the chrome is selected. Is this what you want?
Related
I'm new to JavaScript. Trying to build, for practice, a simple unit converter kind of like the one that google uses for converting kilos to pounds, inches to meters, etc.
I'd like to have an input box for entering the number value.
After that, two lists in the HTML files so i can choose in first the unit i convert from; and on the second the unit i convert to.
Maybe is an obvious one but i have not been able to find an answer to this problem. I'll post the last code/approach i tried.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="simpleweightconversortest.js"></script>
</head>
<body>
<form>
<!-- Select 1-->
<label>From:</label>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="kilograms1">Kilograms</option>
<option value="grams1">Grams</option>
<option value="miligrams1">Miligrams</option>
</select>
<!-- Select 2-->
<label>To:</label>
<select name="converts2" id="Selection2">
<option>Chose Option</option>
<option value="kilograms2">Kilograms</option>
<option value="grams2">Grams</option>
<option value="miligrams2">Miligrams</option>
</select>
<!--INPUT-->
<br>
<br>
<br>Value
<input type="number" id="value" placeholder="Insert value">
<!--RESULT -->
<br>Conversion
<input type="text" id="convertedOuput">
<br>
<br>
<input type="Button" onclick="Conversion()"
value="convert">
</form>
</body>
</html>
var val = document.getElementById("value").value;
var convertedOuput =document.getElementById("convertedOuput");
var selectFrom = document.getElementById("Selection");
var selectTo = document.getElementById("Selection2");
var madeSelection_1 = selecFrom[selectFrom.selectedIndex].value;
var madeSelection_2 = selectTo[selectTo.selectedIndex].value;
function Conversion() {
if (madeSelection_1 == "kilograms1" && madeSelection_2 == "kilograms2") {
var result = val * 1;
document.getElementById('convertedOuput').innerHTML = result;
}
}
I'm not getting any output in my "conversion" input box.
What am i doing wrong ? (i'm sure almost everything) Please help.
document.getElementById('convertedOuput').value = result should display the result of your function.
You have a typo:
var madeSelection_1 = selecFrom[selectFrom.selectedIndex].value;
This should be selectFrom and not selecFrom.
Also, you need to set the value of the input field using convertedOuput.value = result instead of setting its innerHTML. (By the way, convertedOuput is also misspelled, should be convertedOutput, but it's consistent, so it should work anyway.)
And finally, you are checking the selected units outside of the conversion button click handler, so they won't be updated when the user changes the selections in the dropdown. Move the corresponding lines which set value, convertedOuput and madeSelection_1 and madeSelection_2 into the Conversion function. (Explanation: Right now, the code is run once upon page load, so the values loaded there will always be the an empty string coming from the Choose option option. Afterwards, this part is run every time the button is clicked, so the values will be up to date.)
It works now:
function Conversion() {
var val = document.getElementById("value").value;
var convertedOutput = document.getElementById("convertedOutput");
var selectFrom = document.getElementById("Selection");
var selectTo = document.getElementById("Selection2");
var madeSelection_1 = selectFrom[selectFrom.selectedIndex].value;
var madeSelection_2 = selectTo[selectTo.selectedIndex].value;
if (madeSelection_1 == "kilograms1" && madeSelection_2 == "kilograms2") {
var result = val * 1;
convertedOutput.value = result;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="simpleweightconversortest.js"></script>
</head>
<body>
<form>
<!-- Select 1-->
<label>From:</label>
<select name="converts" id="Selection">
<option>Chose Option</option>
<option value="kilograms1">Kilograms</option>
<option value="grams1">Grams</option>
<option value="miligrams1">Miligrams</option>
</select>
<!-- Select 2-->
<label>To:</label>
<select name="converts2" id="Selection2">
<option>Chose Option</option>
<option value="kilograms2">Kilograms</option>
<option value="grams2">Grams</option>
<option value="miligrams2">Miligrams</option>
</select>
<!--INPUT-->
<br>
<br>
<br>Value
<input type="number" id="value" placeholder="Insert value">
<!--RESULT -->
<br>Conversion
<input type="text" id="convertedOutput">
<br>
<br>
<input type="Button" onclick="Conversion()" value="convert">
</form>
</body>
</html>
Note that you would have found a hint to these things more easily if you had looked into your browser's devtools - there you'd have seen an error about selecFrom.
Try pressing F12 in your browser. :-)
Furthermore, in the devtools you can do many powerful things to debug and analyze your code, such as executing arbitrary code at runtime, inspect variables, single-step through your lines of code, etc.
I'd recommend you to watch the Google Chrome Devtools Crash Course video on YouTube to get started!
How can I get a value from list and use it somewhere else (for example in "if" statement)?
<h2> <form>
<select id="day">
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option>
<option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
<option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option> <option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
<option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option>
<option>31</option>
</select>
<select id="month">
<option>Styczen</option><option>Luty</option><option>Marzec</option><option>Kwiecien</option><option>Maj</option>
<option>Czerwiec</option><option>Lipiec</option><option>Sierpien</option><option>Wrzesien</option>
<option>Pazdziernik</option><option>Listopad</option><option>Grudzien</option>
</select>
</form>
I need to use selected value - and depending on choosed numbers I want to make some buttons inactive.
Type this:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
days=$("#day option")
months=$("#month option")
//Now you have a JQuery object which acts like an array.
//Just get the html of each value with `.html()`.
days[0].html() //this is 1
months[3].html() //this is Kwiecien
</script>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to change “selected” value in combobox using JavaScript?
So here's my code"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
How to change default selection (from topics to posts)?
I can NOT modify this part of HTML code in any way, but I can add a script anywhere inside the head.
Try it (have not tested):
var doprdown = document.getElementsByName('show_as')[0];
for(var i = 0; i < dropdown.options.length; i++){
if(dropdown.options[i].value == "posts")
dropdown.selectedIndex = i;
}
Or jQuery:
$("select[name='show_as'] > option[value=posts]").attr('selected', true);
Try using,
Jquery Code:
<script language="javascript" type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('#show_as').val('posts');
});
</script>
Html code:
here i have specified an id in-order to select the select box called "show_as"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as" id="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
This is kinda annoying, but even though I have worked with html/css and tiny bit of jquery I haven't yet learned much about forms etc.
I have a problem and I cant google the answer, but im sure some of you hardcore devs can tell me this quick!?
I need to make a form that could look like this:
HTML;
<form class="slct-form">
<select>
<option value="choose">Choose</option>
<option value="100.000">100.000</option>
<option value="150.000">150.000</option>
<option value="200.000">200.000</option>
</select>
</form>
I need that when I choose one of the elements in my dropdown form it should go to another url... Is this not possible? AND preferable without jquery!
If you add an id to your select, you can access it via plain javascript like this:
var selectmenu = document.getElementById("selectMenu");
selectmenu.onchange = function() {
var selectedOption = this.options[this.selectedIndex];
if (selectedOption.value != "choose")
window.location.assign = "/page.php?selectvalue=" + selectedOption.value;
}
You could do something like this:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript">
function donav(dd)
{
var navUrl = "";
switch(dd.selectedIndex)
{
case 1:
navUrl = "http://www.google.com/";
break;
case 2:
navUrl = "http://www.bing.com";
break;
}
document.location.href = navUrl;
}
</script>
</head>
<body>
<form class="slct-form">
<select onchange="donav(this)">
<option value="choose">Choose</option>
<option value="100.000">100.000</option>
<option value="150.000">150.000</option>
<option value="200.000">200.000</option>
</select>
</form>
</body>
</html>
If i understand you corretly you want to bring a value from one page to another?
You could use the $_GET['name'] with php for that.
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>