CODEWITHSUNDEEP
javascripthtml
user3700925
user3700925

Reputation: 1

getting variable from drop down list

I am banging my head against a wall here. Below, you will find the code I am working with, and I am trying to set a variable by using a drop down list. I have tried everything I can think of, and I know this is simple. However, I am missing something. A nudge in the right direction would be appreciated. I keep getting an alert of "null" on the first two variables, but the third one comes through alright.

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>Homework 4 - Taxi Fare Calculator</title>
    <script src="scripts.js"></script>
  </head>
  <body bgcolor="#f0ffff">
    <h2>Taxi Fare Calculator by Christopher Lewis</h2>
    This calculator will look at a starting zone, ending zone, and total time of a drive.
    In the end, it calculates the fare.
    <h3>Please Choose Starting Zone:</h3>
    <select name="start">
      <option value ="1">Zone 1</option>
      <option value ="2">Zone 2</option>
      <option value ="3">Zone 3</option>
    </select>
    <h3>Please Choose Destination Zone:</h3>
    <select name="ending">
      <option value = "1">Zone 1</option>
      <option value = "2">Zone 2</option>
      <option value = "3">Zone 3</option>
    </select>
    <h3>Please enter total time of ride:</h3>
    <input type="text" id="totalTime" size="5">
    <p>
      <input type="button" id="button" value="Fare total" onclick="calculate()"
  </body>
</html>   

function calculate(){
  var startZone = document.getElementById("start");
  var endingZone = document.getElementById("ending");
  var time = parseFloat(document.getElementById("totalTime").value);
  alert(startZone);
  alert(endingZone);
  alert(time);
}

Upvotes: 0

Views: 361

Answers (5)

nur
nur

Reputation: 161

if you want to query element by name then this might work:

var startZone = document.getElementsByName("start")[0].value;
var endingZone = document.getElementsByName("ending")[0].value;

since getElementsByName returns collection whereas getElementById returns an object.

Upvotes: 0

Laurens
Laurens

Reputation: 2607

First of all, you didn't set an id for the select elements. Secondly, you also need to get the selected value of a select box with javascript like this:

document.getElementById('select-id').options[document.getElementById('select-id').selectedIndex].text;

Here is the correct code:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>Homework 4 - Taxi Fare Calculator</title>
    <script src="scripts.js"></script>
  </head>

<body bgcolor="#f0ffff">

<h2>Taxi Fare Calculator by Christopher Lewis</h2>
This calculator will look at a starting zone, ending zone, and total time of a drive.
In the end, it calculates the fare.
<h3>Please Choose Starting Zone:</h3>
<select id="start" name="start">
    <option value ="1">Zone 1</option>
    <option value ="2">Zone 2</option>
    <option value ="3">Zone 3</option>
</select>
<h3>Please Choose Destination Zone:</h3>
<select id="ending"  name="ending">
    <option value = "1">Zone 1</option>
    <option value = "2">Zone 2</option>
    <option value = "3">Zone 3</option>
</select>
<h3>Please enter total time of ride:</h3>
    <input type="text" id="totalTime" size="5">

<input type="button" id="button" value="Fare total" onclick="calculate()" />

</body></html>

Javascript

function calculate(){
    var startZone = document.getElementById('start').options[document.getElementById('start').selectedIndex].text;
    var endingZone = document.getElementById('ending').options[document.getElementById('ending').selectedIndex].text;
    var time = parseFloat(document.getElementById("totalTime").value);
    alert(startZone);
    alert(endingZone);
    alert(time);
}

demo: http://jsfiddle.net/zUa7S/1/

Upvotes: 0

user3117575
user3117575

Reputation:

You can still get a return value from a "select" element, I made a simple JavaScript example to do this:

But you are trying to select the element by the id, which you are mistaking for the name attribute, in my example I left in the name attributes but added id attributes to select the element by Id via JavaScript

HTML

<select name="start" id="zone">
    <option value ="1">Zone 1</option>
    <option value ="2">Zone 2</option>
    <option value ="3">Zone 3</option>
</select>
<br>The selected value is: <span id='return'>none</span>

JavaScript

document.getElementById("zone").onchange=function(){
  document.getElementById("return").innerHTML=document.getElementById("zone").value;
}

Here is a JSFiddle example

Upvotes: 0

Akinkunle Allen
Akinkunle Allen

Reputation: 1309

The reason why 'startZone' and 'endingZone' are returning 'null' is because you are querying a DOM element with IDs start and ending. There are no elements on the page with such IDs so document.getElementById returns null.

I edited your code. I added ID attribute to the <select> elements

<select name="start" id="start">
 <option value ="1">Zone 1</option>
 <option value ="2">Zone 2</option>
 <option value ="3">Zone 3</option>
</select>


<select name="ending" id="ending">
 <option value = "1">Zone 1</option>
 <option value = "2">Zone 2</option>
 <option value = "3">Zone 3</option>
</select>

Upvotes: 1

Olaf Keijsers
Olaf Keijsers

Reputation: 566

Your selects have name instead of id set, so you won't find them with getElementById.

Upvotes: 0

Related Questions