Element in HTML form is undefined in Javascript

Question

The problem is that I have a HTML form with 4 text inputs, I submit it to a javascript function and the first 3 inputs work just fine but the fourth is undefined.

Here is the important code: The HTML part:

<form action="insertServer.php" method="post" id="insertServer">
Navn:       <input type="text" name="navn" id="navn">
Netid:      <input type="text" name="netid" id="netid">
Serverid:   <input type="text" name="serverid" id="serverid">
Location:   <input type="text" name="location" id="location">
<input type="submit" name="submitButton" class="button" id="submitButton" value="Indsend">
</form>
<div class="resultInsert"></div>

The Javascript part:

<script type='text/javascript'> //Add server
$("#insertServer").submit(function(event) {
event.preventDefault();

$("div.resultInsert").html("Location is:"+location.value+" navn is: "+navn.value);

});
</script>

When I type data into the fields and press submit the first 3 values are just fine but the fourth is shown as "undefined"

In case you need to see the entire file, I have created a gist for it here: https://gist.github.com/anonymous/8052481

Thanks

Quentin · Accepted Answer · 2013-12-20 09:39:11Z

5

Never try to access an element through the DOM by using its id as if it was a global variable.

Some browsers make this possible (as a very ugly legacy of Internet Explorer 4's), but it isn't reliable.

In this case, location is the standard location object and not your HTML element.

Get the element through the DOM using getElementById, jQuery's selector engine or something similar.

var location = jQuery('#location').val();
var navn = jQuery('#navn').val();

$("div.resultInsert").text("Location is:" + location + " navn is: " + navn);

Also note that I've used the text method instead of the html method. Someone might type something with special meaning in HTML into the inputs. Don't let that break the output.

answered Dec 20, 2013 at 9:39

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krzysiek · Accepted Answer · 2013-12-20 09:36:54Z

2

location (address object) is predefined variable and cannot be used in other way.

$("#insertServer").submit(function(event) {
event.preventDefault();

$("div.resultInsert").html("Location is:"+$('#location').val()+" navn is: "+$('#navn').val());

});

answered Dec 20, 2013 at 9:36

Krzysiek

2,51419 silver badges21 bronze badges

1 Comment

Niclas Gleesborg Over a year ago

Thank you, that worked but I would select Quentin's answer because it is more informative and have a better solution for me.

Collectives™ on Stack Overflow

Element in HTML form is undefined in Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related