Using HTML form field in Javascript

Question

I'm designing a website for a client who wants a 'Store Locator', but whats the user to be able to specify the distance from their postcode. To do this, I will use a simple HTML dropdown list, but how do I get this result into my Javascript equation?

This my HTML

<select name="radius" id="radius">
  <option value="5">5 Miles</option>
  <option value="10">10 Miles</option>
  <option value="15">15 Miles</option>
  <option value="20">20 Miles</option>
</select>

And this is my javascript bit which assigns the variables

var parameters = 'lat='+ location.lat() + '&lng=' + location.lng() + '&radius=' ?

What do I need to put after '&radius=' to use the result of my list as the radius variable?

Just to note, what you list there is not _JSON_, it is Javascript code. "JSON" is JavaScript Object Notation, used to represent _data_. — Stephen P, Feb 02 '16 at 20:55

score 0 · Accepted Answer · edited Feb 02 '16 at 20:52

0

To get the selected value of a select input

document.getElementById('radius').value

so your string would be

var parameters = 'lat='+ location.lat() + '&lng=' + location.lng() + '&radius=' document.getElementById('radius').value

edited Feb 02 '16 at 20:52

Brett DeWoody

59,771
29
135
184

answered Feb 02 '16 at 20:51

Yerko Palma

12,041
5
33
57

Apologies, I mistakingly edited your answer. – Brett DeWoody Feb 02 '16 at 20:54
@BrettDeWoody I supposed something weird happen. But don't worry, it happens :) – Yerko Palma Feb 02 '16 at 20:55
1

Rollback to the rescue! – Brett DeWoody Feb 02 '16 at 20:56
Thank you so much Yerko, that was spot on! I've been trying everything to get it to work. Brilliant!!! – user355218 Feb 02 '16 at 22:23

Brett DeWoody · Answer 2 · 2016-02-03T04:51:42.913

0

To get the selected value from the select field you could use:

var radius = document.getElementById("radius").value;

var parameters = 'lat='+ location.lat() + '&lng=' + location.lng() + '&radius=' radius

edited Feb 03 '16 at 04:51

answered Feb 02 '16 at 20:51

Brett DeWoody

59,771
29
135
184

Why not `document.getElementById("radius").value`? – RobG Feb 02 '16 at 21:09
@TerrySeidler—your point is…? The answer to that question should have been "*selectedIndex is only required for ancient versions of Netscape Navigator that are utterly dysfunctional on the modern web, or for getting the values of a multiple select*". This question isn't about a multiple select element. – RobG Feb 03 '16 at 04:38
I have changed the solution based on your input @RobG. This is simpler in this case. – Brett DeWoody Feb 03 '16 at 05:04

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

See Get selected value in dropdown list using JavaScript?.

Instead of using getElementById, you are going to use getElementByName() to pull in the element.

edited May 23 '17 at 11:52

Community

1
1

answered Feb 02 '16 at 20:53

lucky.hooligan

81
2
12

There is no *getElementByName*, and please don't reference w3schools. [*MDN*](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName) and relevant specifications are much better. And *getElementById* is preferred here as it always returns a single element (or *null*), whereas *getElementsByName* can return either a single element or a collection. – RobG Feb 02 '16 at 21:10
Sorry, missed the 's' on Elements. And with just the small snippet of code here, I agree that _getElementById_ is probably the better choice – lucky.hooligan Feb 02 '16 at 21:17

Using HTML form field in Javascript

3 Answers3