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
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
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);
});