Javascript variable in form

Question

I'm creating a process which pulls down a static Google map image using their API.

I have a form which has radio buttons with the following map image options:

 Satellite
 Roadmap
 Hybrid
 Terrain

The radio buttons are in a form - part of which is below:

<summary>Basemap</summary>
<div class="group">
    <p>Select a Map Style:</p>
    <p>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Satellite" checked /> Satellite</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Roadmap"/> Roadmap</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Hybrid" /> Hybrid</label>
        <label><input type="radio" name="basemapStyle" id="basemapStyle" value="Terrain" /> Terrain</label>
    </p>
</div>

I have an underlying javascript document which is called from the html page.

It contains the following code:

var bmStyle = document.getElementById("basemapStyle").value;

if (bmStyle = "Satellite" ) {       
    var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Roadmap" ) {        
    var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Hybrid" )  {        
    var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
}
else if (bmStyle = "Terrain" )  {       
    var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

The page loads successfully and a "basemap" is generated. However, the selected radio button makes no difference and the only first variable in the if else statement seems to get loaded.

I feel there's some logic error in the if else statement but I can't seem to get my head round it.

Declare var basemapStyle outside of your if statements. You're into scope issues. Also you're using an assignment operate in your if statements, use == or ===. — Alex
– Alex, Commented Jun 28, 2018 at 14:27
You have multiple elements with same id, that is not allowed in html. — Esko
– Esko, Commented Jun 28, 2018 at 14:27
Both you can have and is allowed to have duplicate IDs but getElementsById() will always return the first. — marekful
– marekful, Commented Jun 28, 2018 at 14:28
@Alex There are no scope issues as var declarations get hoisted. But it does not look pretty, though. — mbuechmann
– mbuechmann, Commented Jun 28, 2018 at 14:51

Erwin Moller · Accepted Answer · 2018-06-28 14:30:53Z

1

You cannot use the same id for different elements.

So:

var bmStyle = document.getElementById("basemapStyle").value;

is not returning what you expect. Check it by adding this line:

alert(bmStyle);

So remove the id's.

Comments

KaSkuLL · Accepted Answer · 2018-06-28 14:54:34Z

1

First:
You have this in your conditional:

if (bmStyle = "Satellite")

Instead you should use:

if (bmStyle == "Satellite")

if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }

Second:
IDs should be unique, so you must change it.

Solution on your code (using duplicated IDs):

var bmStyle = $('#basemapStyle:checked').val()


if (bmStyle == "Satellite" ) {       
        var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Roadmap" ) {        
        var basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Hybrid" )  {        
        var basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
        }
    else if (bmStyle == "Terrain" )  {       
        var basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
        }

edited Jun 28, 2018 at 14:54

answered Jun 28, 2018 at 14:28

KaSkuLL

5517 silver badges28 bronze badges

4 Comments

chevybow Over a year ago

Why not ===? Triple equals are always preferred

Alex Over a year ago

== automatically converts types if the operands aren't the same type. === uses strict comparison. Read here

KaSkuLL Over a year ago

@Alex I know, for sure in this case == will run. Maybe === is the correct one. But the real problem was that his code was using equals instead of comparing

mbuechmann Over a year ago

This still won't work as all radio boxes have the same id.

Shashi Kumar · Accepted Answer · 2018-06-28 14:55:23Z

Firstly you have Assignment = in if instead of ==
You have to declare basemapStyle outsite
You cannot use same id to all your radio buttons Here i have redesigned Your Code To Get A Proper Output using Function

function fun(radio){
var bmStyle = radio.value;	

  var basemapStyle;
		if (bmStyle == "Satellite" )
             basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
            
        else if (bmStyle == "Roadmap" )       
             basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
           
        else if (bmStyle == "Hybrid" )      
             basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
           
        else if (bmStyle == "Terrain" )      
             basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
alert(basemapStyle);    		
	}

<summary>Basemap</summary>
<div class="group">
<p>Select a Map Style:</p>
<p>
<label><input type="radio" name="basemapStyle"  value="Satellite" checked onclick=fun(this) /> Satellite</label>
<label><input type="radio" name="basemapStyle"  value="Roadmap" onclick=fun(this) /> Roadmap</label>
<label><input type="radio" name="basemapStyle" value="Hybrid" onclick=fun(this) /> Hybrid</label>
<label><input type="radio" name="basemapStyle"  value="Terrain" onclick=fun(this) /> Terrain</label>
</p>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

Instead of using multiple if statements, you should store all the data in an object an retrieve the values from there. And as already mentioned, an id must be unique. So use classes instead.

Example

var radios = document.querySelectorAll(".basemapStyle");
var basemapStyle = "";

var bmStyles = {
  "Satellite": "&maptype=satellite&scale=4&format=png32&key=xxxx",
  "Roadmap": "&maptype=roadmap&scale=4&format=png32&key=xxxx",
  "Hybrid": "&maptype=hybrid&scale=4&format=png32&key=xxxx",
  "Terrain": "&maptype=terrain&scale=4&format=png32&key=xxxx"
}

for (var i = 0; i < radios.length; i += 1) {
  var radio = radios[i];
  if (radio.checked === true) {
    basemapStyle = bmStyles[radio.value];
    console.log(basemapStyle);
  }
}

<summary>Basemap</summary>
<div class="group">
  <p>Select a Map Style:</p>
  <p>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Satellite"  /> Satellite</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Roadmap" /> Roadmap</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Hybrid" /> Hybrid</label>
    <label>
        <input type="radio" name="basemapStyle" class="basemapStyle" value="Terrain" checked/> Terrain</label>
  </p>
</div>

mbuechmann · Accepted Answer · 2018-06-28 14:33:14Z

First assign different ids to the form elements:

<label><input type="radio" name="basemapStyle" id="basemapStyle_Satellite" value="Satellite" checked /> Satellite</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Roadmap" value="Roadmap"/> Roadmap</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Hybrid" value="Hybrid" /> Hybrid</label>
<label><input type="radio" name="basemapStyle" id="basemapStyle_Terrain" value="Terrain" /> Terrain</label>

Set the default value to the first value. Then check all other form elements:

var basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
if (document.getElementById('basemapStyle_Roadmap').checked) {
    basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
} else if (document.getElementById('basemapStyle_Hybrid').checked) {
    basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
} else if (document.getElementById('basemapStyle_Terrain').checked) {
    basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

leonardofed · Accepted Answer · 2018-06-28 14:29:40Z

0

In XML, fragment identifiers are of type ID, and there can only be a single attribute of type ID per element.

Check out W3C

answered Jun 28, 2018 at 14:29

leonardofed

9962 gold badges9 silver badges26 bronze badges

1 Comment

serraosays Over a year ago

you need to post the relevant parts of the W3C link for this answer to stay relevant if their content changes.

Alex · Accepted Answer · 2021-06-14 18:12:33Z

0

Firstly, you have used an Assignment Operator [=] in your if statement.

Instead, you have to use a Comparison Operator [==] or [===].

This means that your code if (bmStyle = "Satellite") should be if (bmStyle == "Satellite" )

Read about this on W3 JavaScript Operators Reference.

Secondly, you have assigned the same `ID` to all of your radio buttons; you can't do that. `ID's` are made to make the element unique.

Thirdly, it's neater to assign your `basemapStyle` variable outside of the if statements like so:

// Specify all radio buttons by their 'Unique ID'
var bmStyle1 = document.getElementById("basemapStyle1").value;
var bmStyle2 = document.getElementById("basemapStyle2").value;
var bmStyle3 = document.getElementById("basemapStyle3").value;
var bmStyle4 = document.getElementById("basemapStyle4").value;

// Declared outside
var basemapStyle;

if (bmStyle1 == "Satellite") {
  basemapStyle = "&maptype=satellite&scale=4&format=png32&key=xxxx";
} else if (bmStyle2 == "Roadmap") {
  basemapStyle = "&maptype=roadmap&scale=4&format=png32&key=xxxx";
} else if (bmStyle3 == "Hybrid") {
  basemapStyle = "&maptype=hybrid&scale=4&format=png32&key=xxxx";
} else if (bmStyle4 == "Terrain") {
  basemapStyle = "&maptype=terrain&scale=4&format=png32&key=xxxx";
}

console.log(basemapStyle);

<summary>Basemap</summary>
<div class="group">
  <p>Select a Map Style:</p>
  <p>
    <label><input type="radio" name="basemapStyle" id="basemapStyle1" value="Satellite" checked /> Satellite</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle2" value="Roadmap"/> Roadmap</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle3" value="Hybrid" /> Hybrid</label>
    <label><input type="radio" name="basemapStyle" id="basemapStyle4" value="Terrain" /> Terrain</label>
  </p>
</div>

Follow this JSFiddle link to see an updated and optimized version.

edited Jun 14, 2021 at 18:12

answered Jun 28, 2018 at 14:35

Alex

2,2321 gold badge12 silver badges28 bronze badges

4 Comments

mbuechmann Over a year ago

basemapstyle does not have the be declared outside the if statement. The variable gets hoisted. But it does not look pretty, though.

Alex Over a year ago

Yeah, I guess in this case it just looks prettier. :)

Alex Over a year ago

And it's a good practice to declare your variables at the top of the scope.

mbuechmann Over a year ago

I completely agree. :)

Collectives™ on Stack Overflow

Javascript variable in form

7 Answers 7

Comments

4 Comments

Comments

Example

Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

4 Comments

Comments

Example

Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related