GetElementById: mudanças entre as edições
| Linha 9: | Linha 9: | ||
''Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:'' | ''Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:'' | ||
<pre> | |||
<html> | |||
<head> | |||
<title>Exemplo de getElementById() no Formulário</title> | |||
<style type="text/css"> | |||
#msg_erro { | |||
color: red; | |||
font-weight: bold; | |||
} | |||
</style> | |||
</head> | |||
<body> | |||
<script language="JavaScript"> | |||
function teste_submit() | |||
{ | |||
var obj_form = document.getElementById('form_teste'); | |||
var obj_nome = document.getElementById('nome_teste'); | |||
var obj_cargo = document.getElementById('cargo_teste'); | |||
var obj_msg_erro = document.getElementById('msg_erro'); | |||
var msg_erro = ''; | |||
if(obj_nome.value == '') | |||
msg_erro = 'campo NOME vazio'; | |||
else if(obj_cargo.value == '') | |||
msg_erro = 'campo CARGO vazio'; | |||
if(msg_erro == '') | |||
obj_form.submit(); | |||
else | |||
obj_msg_erro.innerHTML = msg_erro; | |||
} | |||
</script> | |||
<form id="form_teste" action="http://www.comocriarsites.com" method="post"> | |||
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR> | |||
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR> | |||
<input type="Button" value="Enviar" onclick="teste_submit();"> | |||
</form> | |||
<div id="msg_erro"></div> | |||
</body> | |||
</html> | |||
</pre> | |||
Edição das 15h50min de 31 de outubro de 2013
Função getElementById
A função getElementById() do Javascript é uma função muito utilizada quando queremos fazer um site mais interativo. Essa função pode retornar o objeto de qualquer elemento na página que tenha um id único, e também funciona na maioria dos navegadores. A função getElementById() do Javascript é bem fácil de usar, e é útil em muitas ocasiões. Vamos exemplificar algumas para melhor entendimento.
getElementById() para Tratamento e Envio de Formulário
Vamos supor que eu quero fazer alguma verificações do formulário antes de envia-lo. Eu posso chamar uma função Javascript que faz uso do getElementById() para fazer as verificações necessárias antes de realmente enviar o formulário, porque caso as verificações não procedam, eu posso não enviar o formulário. Vamos ao código:
<html>
<head>
<title>Exemplo de getElementById() no Formulário</title>
<style type="text/css">
#msg_erro {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<script language="JavaScript">
function teste_submit()
{
var obj_form = document.getElementById('form_teste');
var obj_nome = document.getElementById('nome_teste');
var obj_cargo = document.getElementById('cargo_teste');
var obj_msg_erro = document.getElementById('msg_erro');
var msg_erro = '';
if(obj_nome.value == '')
msg_erro = 'campo NOME vazio';
else if(obj_cargo.value == '')
msg_erro = 'campo CARGO vazio';
if(msg_erro == '')
obj_form.submit();
else
obj_msg_erro.innerHTML = msg_erro;
}
</script>
<form id="form_teste" action="http://www.comocriarsites.com" method="post">
Nome: <input type="text" id="nome_teste" name="nome_teste"><BR>
Cargo: <input type="text" id="cargo_teste" name="cargo_teste"><BR>
<input type="Button" value="Enviar" onclick="teste_submit();">
</form>
<div id="msg_erro"></div>
</body>
</html>
