GetElementById

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar

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>