How to get field values with javascript

Question

How to get field values with javascript

Navigation

#1 by (2 votes)

1

Let's say I have the following SELECT in my HTML:

<form name="formularioEstados">
    <label for="states">Selecione um estado:<br>
        <select id="states" name="estados" onChange="mostraCapital()">
            <option value=""></option>
            <option value="AC">Acre</option>
            <option value="AL">Alagoas</option>
            <option value="AP">Amapá</option>
            <option value="AM">Amazonas</option>
            <option value="BA">Bahia</option>
            <option value="CE">Ceará</option>
            <option value="DF">Distrito Federal</option>
            <option value="ES">Espirito Santo</option>
            <option value="GO">Goiás</option>
            <option value="MA">Maranhão</option>
            <option value="MS">Mato Grosso do Sul</option>
            <option value="MT">Mato Grosso</option>
            <option value="MG">Minas Gerais</option>
            <option value="PA">Pará</option>
            <option value="PB">Paraíba</option>
            <option value="PR">Paraná</option>
            <option value="PE">Pernambuco</option>
            <option value="PI">Piauí</option>
            <option value="RJ">Rio de Janeiro</option>
            <option value="RN">Rio Grande do Norte</option>
            <option value="RS">Rio Grande do Sul</option>
            <option value="RO">Rondônia</option>
            <option value="RR">Roraima</option>
            <option value="SC">Santa Catarina</option>
            <option value="SP">São Paulo</option>
            <option value="SE">Sergipe</option>
            <option value="TO">Tocantins</option>
        </select>
    </label>
    <br>
    <label for="capital"> A sua capital é: <br>
        <input id="capital" type="text" name="nomeCapital" disabled>
    </label>
</form>

To get the value of the selected state we use the onChange event, and the teacher of my technical course taught us as follows:

var estado = document.formularioEstados.estados.value;

Is this the best way to do it, is it right, or is there a more efficient and correct way?

javascript

asked by anonymous 11.05.2015 / 20:05

1 answer

Timer with day hour minute and second How to use the Bitsnoop API

score 2 · Accepted Answer

This works on all browsers, but I'd say it's old-fashioned because it's from the so-called "DOM Level 0" time, when there was no formal specification of how this sort of thing should work. Curious for the teacher to teach like that. A more current way would be:

var estado = document.getElementById('estados').value;

Or:

var estado = document.querySelector('#estados').value;

Regarding the definition of the event listener inline (in HTML itself, in% with%), we strongly recommend avoiding it. The reason is the separation of responsibilities: in an organized code, HTML must be responsible only for the structure of the content, and JavaScript must be responsible for the behavior. In this section you have mixed structure and behavior in the HTML itself. To take to JS, remove <select id="states" name="estados" onChange="mostraCapital()"> and use this instead:

var campo = document.getElementById('estados');
campo.addEventListener('change', mostraCapital, false);