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 :-)

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 :-)

• javascript
• forms
• input
• user-input
• getelementbyid

• You have multiple elements with the same id, inputs do not have onsubmit attributes etc. – Musa Commented Apr 28, 2013 at 0:49
• I set the 2 elements (dropdown and input box) to let you see the dropdown works (whereas input box doesn't). Take a look here (no dropdown): ffio.it/test4.html – MultiformeIngegno Commented Apr 28, 2013 at 0:51
• the input element's id is (startText instead of start) wrong. Look at my answer below. – Yaw Boakye Commented Apr 28, 2013 at 0:53
• startText was an error when I typed this question. The code on the page is correct. – MultiformeIngegno Commented Apr 28, 2013 at 0:56

1 Answer 1

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.