Comprobar el valor de un campo select y modificarlo en jQuery

27 oct

Ayer os explicabamos como trabajar con los campos checkbox, validar su estado y cambiar su estado mediante jQuery. Hoy vamos a hacer lo mismo pero con un campo select.

Hemos creado 4 botones, 1 botón para comprobar el estado del select, y los otros 3 botones para cambiar la opción seleccionada.

Primero vamos a obtener la opción seleccionada del select, el id y el texto, presionando sobre el botón.

$(document).ready(function(){

	$("#select_comprobar").click(function() {
		alert("Id: "+$("#sexo option:selected").val()+" | Texto: "+$("#sexo option:selected").text());
	});

});

Una vez que presionemos el botón recibiremos en un alert el id y el texto de la opción seleccionada, gracias al atributo option:selected ($("#sexo option:selected").val()$("#sexo option:selected").text())

Para terminar vamos a cambiar la opción seleccionada del select con estos 3 botones:

$(document).ready(function(){

	$("#select_cambiar_defecto").click(function() {
		$("#sexo option[value=0]").attr("selected",true);
	});

	$("#select_cambiar_hombre").click(function() {
		$("#sexo option[value=1]").attr("selected",true);
	});

	$("#select_cambiar_mujer").click(function() {
		$("#sexo option[value=2]").attr("selected",true);
	});

});

El código HTML quedaría así:

<select name="sexo" id="sexo">
<option value="0">- Seleccionar -</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>

<input name="select_comprobar" id="select_comprobar" type="button" value="Comprobar" />
<input name="select_cambiar_defecto" id="select_cambiar_defecto" type="button" value="Seleccionar defecto" />
<input name="select_cambiar_hombre" id="select_cambiar_hombre" type="button" value="Seleccionar hombre" />
<input name="select_cambiar_mujer" id="select_cambiar_mujer" type="button" value="Seleccionar mujer" />

Comprobar si un input Checkbox está “checked” con jQuery

26 oct


Otra de las facilidades que nos encontramos en jQuery es validar formularios, y trabajar con ellos dinámicamente.

Vamos a comprobar con un botón el estado del checkbox, si está checked o no, y con otros botones vamos a activarlo y desactivarlo, para que veáis lo sencillo que es.

Primero vamos a comprobar el estado del checkbox:

$(document).ready(function(){

	$("#checkbox_comprobar").click(function() {
		if($("#checkbox").is(':checked')) {
			alert("Está activado");
		} else {
			alert("No está activado");
		}
	});

});

Una vez que presionemos el botón recibiremos en un alert la respuesta a si está activado o no el checkbox gracias a la función is(':checked')

Para terminar vamos a activar y desactivar el checkbox sin hacer click sobre él con estos 2 botones:

$(document).ready(function(){

	$("#checkbox_activar").click(function() {
		$("#checkbox").attr('checked', true);
	});

	$("#checkbox_desactivar").click(function() {
		$("#checkbox").attr('checked', false);
	});

});

El código HTML quedaría de esta forma:

<input name="checkbox" id="checkbox" type="checkbox" value="1" />
<input name="checkbox_comprobar" id="checkbox_comprobar" type="button" value="Comprobar" />
<input name="checkbox_activar" id="checkbox_activar" type="button" value="Activar" />
<input name="checkbox_desactivar" id="checkbox_desactivar" type="button" value="Desactivar" />

Formulario con validación de campos en jQuery

25 oct


Hoy vamos a validar todos los campos de un formulario con jQuery, para evitar que nos envíen los formularios de nuestro sitio web vacíos.

En primer lugar, vamos a comprobar que los campos nombre, apellidos, localidad, no se dejan en blanco y tienen una longitud mínima.

Después podemos continuar validando el teléfono, comprobando que todos los caracteres son numéricos.

También validaremos los campos de e-mail, para comprobar que se trata de una dirección e-mail correcta, con formato ejemplo@ejemplo.com

Para terminar validaremos los campos select, comprobando que se ha seleccionado una opción, y los input checkbox e input radio comprobando que han sido marcados.

Aquí el ejemplo del formulario:

<form name="formulario" id="formulario" class="formulario" action="" method="post">
<ul>
<li>Nombre <span>(*)</span></li>
<li>Apellidos <span>(*)</span></li>
<li><input name="nombre" id="nombre" type="text" /></li>
<li><input name="apellidos" id="apellidos" type="text" /></li>
<li>Teléfono <span>(*)</span></li>
<li>E-Mail <span>(*)</span></li>
<li><input name="telefono" id="telefono" type="text" /></li>
<li><input name="email" id="email" type="text" /></li>
<li>Localidad <span>(*)</span></li>
<li>Provincia <span>(*)</span></li>
<li><input name="localidad" id="localidad" type="text" /></li>
<li>
<select name="provincia" id="provincia" class="mail_provincia">
...............................
</select>
</li>
<li>¿Desea apuntarse al boletín de noticias? <span>(*)</span></li>
<li>&nbsp;</li>
<li>
<input name="boletin" id="boletin" type="radio" value="Si" /> Si
<input name="boletin" id="boletin" type="radio" value="No" /> No
</li>
<li>&nbsp;</li>
<li>¿Cada cuanto nos visitas? <span>(*)</span></li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="diariamente" /> Diariamente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="semanalmente" /> Semanalmente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="mensualmente" /> Mensualmente</li>
<li>&nbsp;</li>
<li class="botones"><input name="submit" id="submit" type="submit" value="Validar" /></li>
<li class="botones"><input name="reset" id="reset" type="reset" value="Restablecer" /></li>
</ul>
</form>

Y el código jQuery para validar los campos:

$(document).ready(function(){
	$("#formulario").submit(function () {
		if($("#nombre").val().length < 4) {
			alert("El nombre debe tener más de 3 caracteres");
			return false;
		}
		if($("#apellidos").val().length < 4) {
			alert("Los apellidos deben tener más de 3 caracteres");
			return false;
		}
		if($("#telefono").val().length < 4 || isNaN($("#telefono").val())) {
			alert("El teléfono debe tener más de 3 caracteres y solo números");
			return false;
		}
		if($("#email").val().length < 1) {
			alert("La dirección e-mail es obligatoria");
			return false;
		}
		if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
			alert("La dirección parece incorrecta");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#provincia option:selected").val() == "") {
			alert("La provincia es obligatoria");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#boletin").is(':checked')) { } else {
			alert("Indique si desea apuntarse al boletín de noticias");
			return false;
		}
		if($("#visitas").is(':checked')) { } else {
			alert("Indique cada cuanto nos visitas");
			return false;
		}
		return false;
	});
});

Más adelante os explicaré uno a uno, como validar cada tipo de campo y algo más de información sobre ello.

Aquí os dejo el ejemplo, que es muy sencillo de entender.

Menú interactivo con mouseenter y mouseleave con jQuery

22 oct

Este ejemplo se puede realizar con HTML y CSS, pero para seguir explicando como funcionan los eventos mouseenter y mouseleave viene bien este ejemplo. En este ejemplo tan sencillo vamos a cambiar con css() el fondo del menú al pasar por encima.

Con HTML y CSS deberíamos hacerlo con las etiquetas <a> para poder hacer este efecto, con jQuery no es necesario especificar que se trata de un enlace <a> para hacer este efecto de cambio de color, al pasar por encima del texto/enlace.

Aquí os enseño el código jQuery que vamos a utilizar:

$(document).ready(function(){
	$(".menu li").mouseenter(function() {
		$(this).css("background","#006699");
	});
	$(".menu li").mouseleave(function() {
		$(this).css("background","#666666");
	});
});

Por defecto el color de fondo es background:#666666;, con el evento mouseenter le cambiamos el fondo a background:#006699; al pasar por encima. Y con mouseleave le volvemos a cambiar el fondo a background:#666666; al sacar el ratón fuera del texto/enlace. Aquí el menú HTML:

<ul class="menu">
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>Enlace 3</li>
<li>Enlace 4</li>
<li class="fin">Enlace 5</li>
</ul>

Y el CSS:

.menu {
	float:left;
	width:100%;
	height:30px;
	line-height:30px;
	padding:0px;
	margin:0px;
	list-style-type:none;
	background:#666666;
	margin-bottom:10px;
}

.menu li {
	float:left;
	padding-left:33px;
	padding-right:33px;
	height:30px;
	line-height:30px;
	background:#666666;
	color:#FFFFFF;
	border-right:1px solid #FFFFFF;
}

.menu li.fin {
	border:0px;
}

Efecto de texto sobre imagen con mouseenter y mouseleave con jQuery

22 oct

Hoy os vamos a enseñar como utilizar las funciones mouseenter, mouseleave y animate de jQuery, con un ejemplo bastante sencillo pero muy práctico, para añadir textos a las imágenes.

Con el evento mouseenter y mouseleave podemos ejecutar una función asociada a dicha acción, al pasar por encima de un elemento, y al sacar el ratón del elemento.

Estos eventos son ideales para imágenes, para ejecutar alguna acción al pasar por encima de una imagen. Para realizar menús animados, al pasar por encima de un enlace, cambiar el color del fondo, el tamaño de la fuente, mover la posición del texto, etc.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		alert("Hemos metido el ratón dentro del elemento con clase ejemplo_img");
	});
	$(".ejemplo_img").mouseleave(function() {
		alert("Hemos sacado el ratón fuera del elemento con clase ejemplo_img");
	});
});
</script>
<div class="ejemplo_img"><img src="foto1.jpg" width="600" height="450" /></div>

Una vez que ya sabemos como utilizar estos eventos de posición del ratón, vamos a ejecutar una pequeña animación al pasar por encima de la imagen.

Con la función animate() de jQuery podemos animar un elemento cambiando su css, width, height, left, right, top, opacity, margin, fontsize, etc. En este ejemplo vamos a ocultar en css el título, y al pasar por encima de la imagen, con animate() vamos a cambiar su css y mostrarlo poco a poco con esta pequeña animación.

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_img").mouseenter(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'390px' },{ queue:false, duration:300 });
	});
	$(".ejemplo_img").mouseleave(function() {
		$(".ejemplo_img_cont", this).stop().animate({ top:'450px' },{ queue:false, duration:300 });
	});
});
</script>

Por defecto le ponemos el top en 450px para ocultarlo debajo de la foto, y al pasar por encima (mouseenter) lo cambiamos a 390px para mostrarlo. Una vez que sacamos el ratón fuera (mouseleave) de la imagen,volvemos a poner el top en 450px para ocultarlo otra vez. Un ejemplo muy sencillo pero práctico para nuestros proyectos.

Página 4 de 6« Primera...23456