Question

38

getElementById() and input form

rated 0 times [ 44] [ 6] / answers: 1 / hits: 18956 / 11 Years ago, sun, april 28, 2013, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesse

Add To Favorites

Follow

Total Points: 513

Total Questions: 118

Total Answers: 106

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 11 Years ago mustafaericho · Accepted Answer

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.