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
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
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: