Archivo

Posts Tagged ‘jquery’

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:

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: , ,