JQuery: Trabalhando com INPUTs

Mais um post sobre JQuery. Agora, mostrando como trabalhar com INPUTs.

No código abaixo disponibilizamos diversas formas de obter os dados dos inputs; temos exemplos de contagem de inputs e como setar o foco no primeiro input.

É claro que existem outras possibilidades, porém estes exemplos ajuda bastante.

Abraços e até a próxima!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INPUTs</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
		/***********************/
		/*       EXEMPLO 1     */
		/************************/
		$('input[type="submit"]').click(function(){
			// desabilitando submit
			$("form").submit(function () { return false; });
			// definindo variavel
			var valor = $('input[type="text"][name="dados"]').val();
			// checando o valor do campo
			if (!valor == ""){
			    // exibindo o valor do primeiro
				// campo
				alert (valor);
			}else{
			    // mensagem de alerta
				alert ("Por favor, preencher o primeiro campo");
				// setando o foco no primeiro input
				$("input:text:first:visible").focus();
			}
		});
 
		/***********************/
		/*       EXEMPLO 2     */
		/************************/
		// utilizando metodo .get()
		// get() inicia em 0
		var dados2 = $('input[type="text"]').get(1);
		//exibindo o valor do segundo input
		alert (dados2.value);
 
		/***********************/
		/*       EXEMPLO 3     */
		/************************/
		var name_dados = $('input[name="dados"]').val();
		// exibindo o valor do input de name = dados
		alert (name_dados);
 
		/***********************/
		/*       EXEMPLO 4     */
		/************************/
		var inputs = $(":input").length;
		// retorna a quantidade de inputs
		// resultado: 3
		$("#mensagem").text("Total de inputs: " +inputs);
   });
</script>
</head>
<body>
   <form id="teste" name="teste" method="post" action="">
      Dados: <input type="text" name="dados" id="dados" value="dados 1" />
      Dados2: <input type="text" name="dados2" id="dados2" value="dados 2" />
      <input type="submit" value="TESTE" id="submit" />        
   </form>
   <p id="mensagem"></p>
</body>
</html>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *