CODEWITHSUNDEEP
javascriptformsinputuser-inputgetelementbyid
MultiformeIngegno
MultiformeIngegno

Reputation: 7059

getElementById() and input form

I have a

function calcRoute() {
  var start = document.getElementById('start').value;
}

And then a

<select id="start" onchange="calcRoute();">
  <option value="somevalue">Dropdown 1</option>
  <option value="somevalue">Dropdown 2</option>
  <option value="somevalue">Dropdown 3</option>
</select>

Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with

<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>

But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)

Upvotes: 1

Views: 22789

Answers (1)

Fernando Jorge Mota
Fernando Jorge Mota

Reputation: 1554

You should change from:

<input type="text" id="startText" name="start">

To:

<input type="text" id="start" name="start">

As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)

If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:

var start = document.getElementById('startText').value || document.getElementById('start').value;

As if the input is empty, Javascript uses the value from the dropdown list.

Update

In adition to the change of the ID, change your form to something as:

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="calcRoute();" value="Go">
</form>

To not allow form submission.

Upvotes: 1

Related Questions