logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Formulários

Ter habilidades para manipular formulários e seus campos com Javascript é fundamental no desenvolvimento web, por isso esta aula será dedicada a explorar um pouco mais este assunto.

Guardar o valor de um campo

Até agora fizemos algumas tarefas em que pegamos os valores digitados em campos de texto ou número usando a propriedade value. Vamos ver a seguir como pegamos valores de campos de outros tipos.

Select Box

Solte aqui a opção selecionada:

                    

    document.getElementById("mostrar_opcao").onclick = function () {

        var campo_select = document.getElementById("options");
        var indice_selecionado = campo_select.options.selectedIndex;
        var valor_selecionado = campo_select.options[indice_selecionado].innerHTML;
        document.getElementById("opcao_selecionada").innerHTML = valor_selecionado;

    };

                    
                

Há outra maneira mais simples de obter a opção selecionada, já que ela fica guardada na propriedade value do select box. Porém, desta maneira pegamos o valor do atributo value do elemento selecionado, e não o seu texto:

                    

        var indice_selecionado = document.getElementById("options").value;
        console.log(indice_selecionado);

                    
                

Podemos também selecionar uma opção via Javascript, o que pode ser útil quando a seleção de um campo interfere na opção selecionada em outro campo, ou quando guardamos em local storage uma opção selecionada anteriormente, para que o usuário não precise selecionar novamente.

Fazemos isto, definindo o atributo value do select box:

                    

    document.getElementById('options').value = "opt3";

                    
                

Radio Buttons
Masculino
Feminino
Prefiro não dizer

Solte aqui a opção selecionada:

                    

    document.getElementById("mostrar_radio").onclick = function () {

        var radio = document.getElementsByName("genero");
        
        var radio_selected;
        
        for (var a = 0;  a < radio.length; a++) {
            if (radio[a].checked) {
                radio_selected = radio[a].value;
            }
        }
        
        document.getElementById("radio_selecionado").innerHTML = radio_selected;

    };

                    
                
CheckBoxes
Desenvolvimento Front-End
Desenvolvimento Back-End
Design

Solte aqui as opção selecionadas em lista:


                    

    document.getElementById("mostrar_check").onclick = function () {


        var check = document.getElementsByName("interesse");

        document.getElementById("check_selecionado").innerHTML = "";

        for (var b = 0;  b < check.length; b++) {
            if (check[b].checked) {
                document.getElementById("check_selecionado").innerHTML += '<li>' + check[b].value + '</li>';
            }
        }
    

    };

                    
                
Date
Selecione a data:

Solte aqui a data selecionada:


                    

    document.getElementById("mostrar_data").onclick = function () {

        var data_select = document.getElementById("data_evento").value;
        var data_completa = new Date(data_select);
        document.getElementById("data_selecionada").innerHTML = data_completa;

    };

                    
                

O input do tipo date está entre os campos introduzidos pelo HTML5. Veja abaixo a lista completa destes novos campos:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

  • Índice de Aulas