Category Archives: jQuery

Dar un valor inicial a un radio button si no tiene valor (jQuery+PHP)

Posted on by

Esta es una ampliación de este otro post reciente.

Si tenemos este trozo de formulario:

<input type="radio" name="tipo_cliente" id="tipo_cliente_defecto" value="2" <?=$valor_inicial==2?'checked':'';?>/> Particular
<input type="radio" name="tipo_cliente" value="3" <?=$valor_inicial==3?'checked':'';?>"/> Aut&oacute;nomo
<input type="radio" name="tipo_cliente" value="1" <?=$valor_inicial==1?'checked':'';?>"/> Empresa

En el que dependiendo del valor de la variable $valor_incial (variable PHP) se escoge una opción u otra.

En ocasiones puede que esa variable no tenga valor (porque sea la primera vez que se rellena el formulario por ejemplo). Podemos solucionarlo dándole el valor inicial en PHP o podemos hacerlo con jQuery:

$(document).ready(function() {
	if(!$("input[name=tipo_cliente]:checked").val()) {
		$("#tipo_cliente_defecto").prop('checked', 'checked');
	}	
});

Claro está, para que funcione la opción que queremos por defecto debe tener la id tipo_cliente_defecto.

Comprobar si un radio button ha sido seleccionado con jQuery

Posted on by

Este secillo ejemplillo nos permite saber si el usuario ha seleccionado algún elemento del radiobutton.

Si tenemos, por ejemplo, este formulario:

<input type="radio" name="tipo_cliente" value="2"/> Particular
<input type="radio" name="tipo_cliente" value="3"/> Aut&oacute;nomo
<input type="radio" name="tipo_cliente" value="1"/> Empresa

Podemos comprobarlo así:

if(!$("input[name=tipo_cliente]:checked").val()) {
	alert('No hay ninguna opción seleccionada');
}

Limitaciones: si alguno de los elementos no tiene valor (o se le pone value=””) esto no va a funcionar.

jQuery: llamar a una función al cambiar el valor de cualquier input en un formulario

Posted on by

Si tenemos un formulario como éste:

<form action="hazalgo.php" method="POST">
<input type="text" id="cantidad_modelo_1"/>
<input type="text" id="cantidad_modelo_1"/>
<input type="text" id="cantidad_modelo_1"/>
</form>

Podemos hacer que cuando cambie el valor de cualquiera de los campos automáticamente se ejecute una determinada función. Bastaría con añadir el siguiente código en la cabecera de la página (preferentemente dentro de las etiquetas <head></head>):

$(document).ready(function() {
	$("[id*=cantidad_modelo_]").each(
		function(index, value) {
			$(this).change(cantidad_cambiada)
		}
	);
});
 
function cantidad_cambiada(){
	alert("Me han llamado desde el campo: " + this.id);
}

Esto se consigue gracias a change(), que nos permite asociar el evento que se produce al cambiar el valor del campo con la función cantidad_cambiada().

También podríamos haber usado una clase, por ejemplo dato_cambiable:

<form action="hazalgo.php" method="POST">
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
<input type="text" class="dato_cambiable" id="cantidad_modelo_1"/>
</form>

Y usar el código:

$(".dato_cambiable").each(

Existe otra función, bind(), que nos permite asociar otros eventos con funciones. Ya la veremos en algún otro post.

jQuery: seleccionar todos los elementos cuya ID contenga una palabra

Posted on by

Imaginemos que, por ejemplo, necesitamos ocultar todos los elementos que contengan el texto “nombre” en su ID. Bastaría con hacer:

$("[id*=nombre]").hide();

Este javascript ocultaría, por ejemplo, todos estos elementos:

<input id="nombre_cliente" type="text" name="nombre_cliente" />
<div id="contenedor_nombre"></div>
<img id="nombre_foto" src="..." alt="" />

jQuery: desactivar un elmento (disable)

Posted on by

Para desactivar un elemento en un formulario bastaría con usar uno de estos métodos:

$("#campo").attr('disabled', 'disabled');
$("#campo").prop('disabled', true);

Y para volver a activar el campo:

.removeAttr("disabled");

Ejemplo de uso

Este sería el formulario:

<input type="text" id="nombre" value=""/>
<input type="checkbox" id="casilla" value="1" onclick="desactivar()"/>Desactivar campo nombre

Y ésta la función que hace la “magia”:

funcion desactivar() {
    if($("#casilla:checked").val()==1) {
        $("#casilla").attr('disabled', 'disabled');
    }
    else {
        $("#casilla").removeAttr("disabled");
}

NOTAS:

  • Es importante destacar que el checbox debe tener value=”1″ porque de otro modo no funcionará.
  • En lugar de un elemento podríamos desactivar varios que tengan la misma clase o usando, por ejemplo algo como “input:text”.

jQuery: evitar que se envíe un formulario – desactivar botón submit

Posted on by

Si queremos desactivar los botones input de un formulario bastaría con añadir el siguiente fragmento dentro de la cabecera de la página, entre las etiquetas:

<script type="text/javascript" language="javascript">
$(document).ready(function() {u
        $("input:submit").click(function() { return false; });
}
</script>

Si luego queremos enviar el formulario tendríamos que añadir un evento onclick al botón submit (o a otro elemento que queramos usar para el envío del formulario):

<form id="formulario">
    <input type="text" name="campo" value=""/>
    <input type="submit" value="Enviar" onclick="enviar()"/>
</form>

Y, por supuesto, crear la función enviar():

function enviar() {
    $("#formulario").submit();
}

NOTA: Es evidente que a la función enviar() hay que añadirle algo de código para que haga algo útil, esto es sólo un ejemplo.

jQuery: sumar los input de un formulario dinámico

Posted on by

Esta es una consulta que me han hecho hace poco y la publico aquí para todos. Me preguntaban cómo se puede hacer para sumar todos los input de un formulario. El problema era que el formulario era dinámico (es decir, que el usuario podía añadir cuantas líneas quisiera) y no se sabía a priori cuántas líneas iba añadiendo. Esto tiene aplicación, por ejemplo en un carrito de compra.

Una posible solución usando jQuery sería que a cada línea que añadimos dinámicamente al formulario le asignemos la clase “importe_linea”. Luego bastaría con usar esta pequeña función para calcular el total:

function calcular_total() {
	importe_total = 0
	$(".importe_linea").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	$("#total").val(importe_total);
}

Os dejo aquí un ejemplo completo para que veáis la utilidad:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function calcular_total() {
	importe_total = 0
	$(".importe_linea").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	$("#total").val(importe_total);
}
 
function nueva_linea() {
	$("#lineas").append('<input type="text" class="importe_linea" value="0"/><br/>');
}
</script>
 
</head>
<body>
 
<form method="POST" action="nada.html">
	<div id="lineas">
		<input type="text" class="importe_linea" value="0"/><br/>
	</div>
	<label for="total">Total: <input type="text" id="total" value="0"/><br/>
	<input type="button" value="Nueva l&iacute;nea" onclick="nueva_linea()"/>
	<input type="button" value="Calcular" onclick="calcular_total()"/>
</form>
 
</body>

jQuery: desactivar el menú contextual (el del botón derecho)

Posted on by

Si añadimos este sencillo script a nuestro documento HTML evitaremos que el usuario pueda usar el botón derecho del ratón:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
             });
         });
</script>

Este sistema se suele usar para evitar que los visitantes se descarguen imágenes pero, dado que es JavaScript, este sistema tiene muchas limitaciones:

  • Si el usuario tiene desactivado JavaScript no tendrá ningún efecto.
  • El usuario puede guardar la página en su disco duro y extraer las imágenes igualmente.
  • También puede buscar en su carpeta de archivos temporales.
  • O puede simplemente hacer una captura de pantalla.

Convertir todos los input de un formulario en variables con JQuery

Posted on by

Os dejo aquí un pequeño script Javascript/JQuery que permite convertir todos los campos de un formulario en variables.

$("input:text").each(
function(index, value) {
	eval($(this).attr('name') +"='"+ this.value+"'")
}
);

De esta forma, si tenemos:

<input name="empresa" type="text" />

Este script nos creará una variable llamada empresa que contendrá el valor del campo.

Y aquí os dejo la forma de acceder a la variable que acabamos de crear “empresa”:

$("input:text").each(
function(index, value) {
	eval($(this).attr('name') +"='"+ this.value+"'")
}
alert(empresa)
);

Notas importantes:

  • Sólo nos va a coger los campos tipo “text”. Si queremos que nos coja todos debemos quitar :text de la primera línea.
  • Sólo funciona si todos los campos del formulario tienen la etiqueta “name” puesta.

 

jQuery: añadir una línea a una tabla html

Posted on by

Vamos a ver con un sencillo ejemplo cómo añadir una nueva línea a una tabla. En primer lugar es importante que la tabla tenga el elemento TBODY como en este ejemplo:

<table id="tabla">
    <tbody>
        <tr id="primera">
            <td>Primera fila</td>
        </tr>
        <tr id="segunda">
            <td>Segunda fila</td>
        </tr>
    </tbody>
</table>

Para añadir una fila a la tabla basta con hacer:

$('#tabla > tbody:last').append('<tr id="ultima"><td>Ultima fila</td></tr>');

Es posible que lo que queramos hacer sea añadir una nueva línea en un lugar concreto. Supongamos que queremos insertar una fila después de la primera:

$("#primera" ).closest( "tr" ).after("<tr id="insertada"><td>Fila insertada</td></tr>);