How to pass form element with onsubmit?

Question

I am trying to pass the value submitted to my form into a function using onsubmit.

<form action="#" onsubmit="getWeather();return false">
    City: <input type="text" id="city">
    <input type="submit" />
</form>

So how would I pass the value of the city into the getWeather function? Thanks!

Answer 1

Name the field then pass in the value using this.city.value

<form action="#" onsubmit="getWeather(this.city.value);return false">
    City: <input type="text" name="city" id="city-field">
    <input type="submit" />
</form>

Answer 2

The function must be declared before using. You can do that inside a scrip tag before the declaration of the form:

<script>
    function getWeather(){
        var city = document.myform.city.value;     
        return false;
    }
</script>

And then add it in the html like here:

<form action="#" onsubmit="getWeather()" id="myform">
    City: <input type="text" id="city">
    <input type="submit" />
</form>

Best of Luck!