jQuery – Nideaderedes

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

14 diciembre, 20129 enero, 2013 by Gorka Urrutia

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

<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ó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). … Read moreDar un valor inicial a un radio button si no tiene valor (jQuery+PHP)

Comprobar si un radio button ha sido seleccionado con jQuery

19 diciembre, 201218 diciembre, 2012 by Gorka Urrutia

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

<input type="radio" name="tipo_cliente" value="2"/> Particular

<input type="radio" name="tipo_cliente" value="3"/> Autó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');
}

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

9 diciembre, 201212 diciembre, 2012 by Gorka Urrutia

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>

</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);
}

$(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 … Read morejQuery: llamar a una función al cambiar el valor de cualquier input en un formulario

jQuery: seleccionar todos los elementos cuya ID contenga una palabra

1 diciembre, 20124 diciembre, 2012 by Gorka Urrutia

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

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

1	$("[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)

29 noviembre, 20121 diciembre, 2012 by Gorka Urrutia

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

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

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

Y para volver a activar el campo:

.removeAttr("disabled");

1	.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

1 2	<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");
}

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 … Read morejQuery: desactivar un elmento (disable)

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

7 diciembre, 201229 noviembre, 2012 by Gorka Urrutia

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>

$(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>

</form>

jQuery: sumar los input de un formulario dinámico

27 noviembre, 2012 by Gorka Urrutia

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 … Read morejQuery: sumar los input de un formulario dinámico

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

27 noviembre, 201227 noviembre, 2012 by Gorka Urrutia

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>

$(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 … Read morejQuery: desactivar el menú contextual (el del botón derecho)

Convertir todos los input de un formulario en variables con JQuery

26 noviembre, 201223 noviembre, 2012 by Gorka Urrutia

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+"'")
}
);

$("input:text").each(

function(index, value) {

eval($(this).attr('name') +"='"+ this.value+"'")

}

);

De esta forma, si tenemos:

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

1	<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”: … Read moreConvertir todos los input de un formulario en variables con JQuery

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

24 noviembre, 20126 enero, 2012 by Gorka Urrutia

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>

<tbody>

<td>Primera fila</td>

</tr>

<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>');

1	$('#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 … Read morejQuery: añadir una línea a una tabla html

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this:

Share this: