Archivo

Archive for the ‘jquery’ Category

Jquery Inputs Dinámicos, Validación , Guardado de Datos

septiembre 4, 2014 22 comentarios

Debido a las dudas de un Post bastante antiguo que tengo en el Blog, realicé un ejemplo básico de lo siguiente:

1.- Creación de un formulario Dinámico ( Solo Ingreso de Datos)
2.- Validación básica (Javascript)
3.- Como enviar los datos a un servicio para que este los guarde (php, java , asp, etc)

La idea es lograr algo así:

Formulario

Para eso les dejo el código (html/js) que es bastante simple:

Para el caso del servicio que debe procesar los datos, en este caso se llama guardar.php, y se debe implementar el acceso a datos mediante php-mysql, por ahora dejar claro de como recibir los datos, ya ustedes
programan los inserts a la base de datos.

<?php
if(isset($_POST['prod']) && !empty($_POST['prod'])){
        echo join(",",$_POST['prod']);
}else{
  echo 'failed';
}

Como se puede ver el valor de los input está contenido en el arreglo $_POST[‘prod’], básicamente se verifica que no esté vacío es ahí donde deben enviar el arreglo a su clase de bases de datos y guardar.

Saludos

Anuncios
Categorías:html, jquery, php Etiquetas:

Validar Input dinámico con Jquery

enero 2, 2011 8 comentarios

Seguido del post de agregar un input dinamicamente, para enviarlo a nuestro php/asp/jsp, etc siempre es necesario hacer una validación con Javascript para esto crearemos una función que nos valide si el campo es vació (ustedes pueden crear cuantas validaciones necesiten),

Tendremos algo así:

function validarCampos(){
var $inputs = $('#form :input'); // Obtenemos los inputs de nuestro formulario
var formvalido = true; // Para saber si el form esta vacio 

$inputs.each(function() {  // Recorremos los inputs del formulario (uno a uno)
if(!isEmpty($(this).val())){ // Verificamos que el input este vacio 
$(this).css('background','red'); // Agregamos un fondo rojo si este esta vacio
formvalido = false;
}else{
$(this).css('background',''); // quitamos el fondo rojo si este esta lleno
}
});

return formvalido; // retornamos segun corresponda
}

/*
* Funcion que valida que un campo sea completado
* @retun bool
*/
function isEmpty(val){
if(jQuery.trim(val).length &lt;= 0)
	return false;
return true;
}

El código está bastante comentado si quedan dudas pueden consultar, para la próxima veremos como enviar el formulario a PHP y guardarlo en una base de datos Mysql.

Dejo el código fuente como de costumbre en el link:
http://www.megaupload.com/?d=0M67I8L8

Categorías:html, jquery

Agregar Input dinamicamente con Jquery

septiembre 14, 2010 84 comentarios

En alguna ocasiones se nos presenta la necesidad de añadir elementos dinámicamente en nuestros desarrollos, para este ejemplo vamos a utilizar jquery para aquellos que no conocen este framework pueden visitar http://www.jquery.com existe una gran cantidad de ejemplos y documentación.

Lo primero es incluir jquery en nuestro HTML  y crear el formulario para ir agregando nuestros input.


 <form id="form" name="form" method="post">
 <a href="#" onclick="AgregarCampos();">Agregar Campos</a>
 <div id="campos">

Teniendo incluido jquery crearemos una función AgregarCampos, la cual se encargara de ir agregando los inputs dinamicamente, la funcion quedaria mas o menos así.

<script type="text/javascript">
var nextinput = 0;
function AgregarCampos(){
nextinput++;
campo = '<li id="rut'+nextinput+'">Campo:<input type="text" size="20" id="campo' + nextinput + '"&nbsp; name="campo' + nextinput + '"&nbsp; /></li>';
$("#campos").append(campo);
}
</script>

Lo que hace esta función es que cada vez que se hace click en el link agregar campos va sumando un input, dejare un ejemplo para que lo puedan descargar y probar el link es el siguiente.
http://sdrv.ms/OifqYZ

En el próximo post mostraremos como validar y  mandar el contenido a un php para que este procese los datos.

Recuerden Revisar la versión  II Aquí

Categorías:html, jquery, php Etiquetas: , ,