logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

jQuery - Formulários

Na seção anterior tivemos uma aula sobre formulário em que vimos diferentes tipos de campos e como manipular seus valores usando javascript. Vamos agora ver como fazer isto usando jQuery.

.val()

O método val é utilizado para pegar os definir valores de campos de formulário.

                    

    var conteudo_input = $("#campo_nome").val();
    console.log(conteudo_input);
                        
                    
                

Nome:



                    

    $("#campo_nome").val("José Dias");
    conteudo_input = $("#campo_nome").val();
    console.log(conteudo_input);
                        
                    
                

Trabalhando com outros tipos de campos de formulário

Select Box

Para pegar o valor da opção selecionada em select box, podemos usar o método val(), que retorna o valor do atributo value da opção selecionada.

                    

    var valor_selecionado = $('#options').val();
    console.log(valor_selecionado);

                    
                

Para conseguir pegar o texto dentro da opção, não podemos usar o método text() ou html() pois isto retorna todas as opções que estão no select, e não apenas a opção selecionada. Mas isto pode ser resolvido com o método find(), que serve para procurar algo dentro de algum elemento.

Neste caso, vamos procurar dentro da select box pelo elemento que esteja com o atributo selected, e então vamos usar o método text() para pegar o texto desta opção.

                    

    var texto_selecionado = $('#options').find(":selected").text();
    console.log(texto_selecionado);

                    
                

Agora podemos atualizar o valor selecionado sempre que a opção for alterada usando o método change.

                    

    $("#options").change(function(){
        var novo_selecionado = $('#options').find(":selected").text();
        console.log(novo_selecionado);
    });

                    
                
Radio Buttons
Masculino
Feminino
Prefiro não dizer

A forma de pegar o valor do radio button selecionado é parecida com a do select box. A diferença é que neste caso, as opções que fazem parte deste conjunto de radio buttons tem o atributo name="genero", portanto buscamos o elemento desta maneira para pegar o value da opção selecionada:

                    

    var valor_radio_selecionado = $("input[name='genero']:checked").val();
    console.log(valor_radio_selecionado);
   
                    
                

Para pegar o texto da opção selecionada é um pouco mais complicado, porque o campo do tipo rádio não tem conteúdo. Mas podemos resolver isso com um elemento por fora da opção, neste caso um <span>.

                    

    <span><input type="radio" name="genero" value="M" checked> Masculino</span><br>
    <span><input type="radio" name="genero" value="F"> Feminino</span><br>
    <span><input type="radio" name="genero" value="NONE"> Prefiro não dizer</span>


                    
                

Com isso, basta procurar o elemento selecionado e depois selecionar o elemento pai com o método parent() e pegar o seu texto.

                    

    var texto_radio_selecionado = $("input[name='genero']:checked").parent('span').text();;
    console.log(texto_radio_selecionado);
    
                    
                

Agora podemos atualizar sempre que a opção for alterada:

                    

    $("input[name='genero']").change(function() {

        var novo_radio_selecionado = $("input[name='genero']:checked").parent('span').text();;
        console.log(novo_radio_selecionado);

    });

                    
                
CheckBoxes
Desenvolvimento Front-End
Desenvolvimento Back-End
Design

A forma de pegar os valor selecionados de checkboxes é parecida com a dos radio buttons. Mas vamos lembrar que no caso dos checkboxes, várias opções podem ser selecionadas ao mesmo tempo, portando temos que trabalhar com um array.

                    

    $("input[name='interesse']").change(function() {

        var checkboxes_selecionados = $("input[name='interesse']:checked");
        var textos = [];
        
        $.each(checkboxes_selecionados, function( index, value ) {
            
            textos.push($(value).parent("span").text());
        
        });
        
        console.log(textos);
        
    });

                    
                

Índice de Aulas