Inicio > html, jquery, php > Jquery Inputs Dinámicos, Validación , Guardado de Datos

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

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:
  1. marzo 7, 2015 en 9:03 pm

    mano no entiendo como implementarlo.. y como hacer para que me guarde los datos de cada campo a mi bd .

    tngo esta clase en postgresql.. como podria hacer . Gracias

    public function insertar()
    {
    if ( $this->conexion->Conectar_PBD() == true ) {

    $this->sql = “INSERT INTO autor (codigo,nombree,apellidoe,sexoe) VALUES (‘$this->codigo’,’$this->nombree’,’$this->apellidoe’,’$this->sexoe’)”;
    $this->result = pg_query($this->sql);
    if ( pg_affected_rows($this->result) >= 0 ){
    $this->response->Estatus = ‘Insertar’;
    $this->response->cod=$this->codigoe;
    }else{
    $this->response->Estatus = ‘noInsert’;
    }
    }else{
    $this->response->Estatus = ‘noConex’;
    }

    echo json_encode($this->response);
    pg_close($conexion);
    }

  2. julio 17, 2015 en 1:41 am

    muy buen post, pero como hago para insertarlo en mysql?

  3. familiadrnd
    agosto 25, 2015 en 2:26 pm

    Excelente post, desde ya muchas gracias, te hago una consulta, veo que al presionar el boton de AGREGAR NUEVO o bien presionar la tecla Enter me muestra un nuevo campo imput, pero me queda el cursor titilando en el anterior, de alguna manera se podrá ver que al presionar no solo aparezca el imput sino que el cursor este titilando en el. Gracias de antemano, te felicito nuevamente!!!

    • agosto 25, 2015 en 3:17 pm

      Hola, entre la línea 57 / 58 pone lo siguiente; $(this).parent().find(“input”).focus();

      saludos

      • familiadrnd
        agosto 26, 2015 en 2:32 pm

        Gracias por tu respuesta, funciona perfecto!. Ahora al pasar el lector de codigo de barras scanea y me hace focus en el siguiente. Veo que en el guardar.php utilizaste join para que te muestre el arreglo en el alert. A mi me gustaría si es posible que directamente al presionar el botón Guardar se dirija a guardar.php donde le pondre codigo para que guarde y muestre otras opciones, muchas gracias nuevamente no esperaba que respondas tan rápido por lo que te lo agradezco muchisimo. Saludos Pablo.

      • agosto 26, 2015 en 2:56 pm

        Hola, eso es lo que exactamente hace, solo que usa Ajax para guardar los datos ( por eso no ves el refresh de pantalla). Simple lo único que tienes que hacer es eliminar el código ” $( “#miform” ).submit(function( event ) {….. hasta que se cierre la llave”…. y luego darle un action al form

        Saludos

      • familiadrnd
        agosto 26, 2015 en 4:29 pm

        Genial, agregue la linea le puse al form el action a guardar.php y en el hago el count($_POST[‘prod’]) para despues recorrer todos los elementos que traigo con un bucle for así le paso a la base con un insert de cada $_POST[‘prod’][$i]. Te parece correcto estos pasos, seguramente me podrás comentar algo más optimizado. Saludos Pablo.

      • agosto 26, 2015 en 5:35 pm

        Quizá podrías usar un foreach($_POST[‘prod’] as $val){ // insert } podría ser un poco más rápido pero si no insertas mucha info no se notará.

        pd: recuerda validar $_POST[‘prod’] en el backend

        saludos

      • familiadrnd
        agosto 26, 2015 en 7:40 pm

        Siguiendo tu consejo lo cambié por el foreach, con respecto a la validación utilizo el inicio de tu archivo que es
        if(isset($_POST[‘prod’]) && !empty($_POST[‘prod’])){
        espero que te refieras a eso.
        Te hago una consulta para complicar más la cosa, siempre que no te moleste que te siga consultando si es así avisame y esta todo más que bien, en cada etiqueta que escaneo tengo dos codigos uno el del producto y debajo el de cantidad, inicialmente estaba tomando el producto con el campo “prod” y en el insert dandole valor 1, ahora bien si es que se puede como seria para que inicialmente me de 2 campos imput, uno para el producto (prod) y otro para la cantidad (cant) y que al presionar enter en este último me active una nueva linea.
        Y al recibirlos en el guardar.php como segregar prod de cant.

        Gracias nuevamente. Saludos Pablo.

      • familiadrnd
        agosto 26, 2015 en 7:42 pm

        Queria agregarte que esto pasa en cajas que traen 5 unidades adentro o bolsas que traen 20 unidades, asi poder evitar escanear 5 veces la etiqueta.

        Gracias nuevamente.
        saludos Pablo

    • agosto 26, 2015 en 8:23 pm

      Para eso tendrías que modificar un poco el código me imagino quedaría algo como 2 input, uno para código y otro para cantidad, luego con algo de programación pasas del lector a las input los valores separados ( código, cantidad).. luego en el guardar tendrías varios arrays con los datos…

      algo así

      saludos

      • familiadrnd
        agosto 26, 2015 en 9:34 pm

        Buenisimo, desde ya muchas gracias ahi lo probé, te cuento que al escanear el codigo de barras tira un enter y no va al imput de cantidad sino que pone una nueva linea, probe poniendo el focus que me habias pasado antes pero sale igual la nueva linea y directamente posiciona en la cantidad del nuevo renglón.
        Si se podría al scanear el codigo que lo escriba y pase a cantidad para scanear la cantidad y recién ahí cuando lo escribe la pistola tira un enter aparecería el nuevo renglón.

        Luego vi que va escribiendo la linea con los input prod[0][codigo] y prod[0][cantidad], dandole a la segunda linea [1] y así +1 para cada renglón que se agrega.

        Como sería entonces en el guardar.php ya que he probado combinaciones pero no engancho ninguna que funcione
        <?php
        if(isset($_POST['prod']) && !empty($_POST['prod']))
        {
        foreach ($_POST['prod']['codigo'] as $value)
        {………

        Gracias por tu amabilidad y realmente estoy aprendiendo un montón con tu ayuda.

        Saludos Pablo

  4. agosto 27, 2015 en 2:40 pm

    Deje actualizado el código de más arriba, asumiendo lo siguiente, escaneas con el lector el código ( paso 1), el lector manda un enter, focus en cantidad, escaneas cantidad (paso2), agrega nueva línea ( repite todo jaja)…

    te dejo el gist con el php

  5. diego cepedes
    marzo 28, 2016 en 9:14 pm

    Estimado es muy bueno tu código, si quiero quitar algún campo con un botón me puede explicar donde lo tengo q modificar mil gracias

  6. marzo 28, 2016 en 9:17 pm

    Estimado muy bueno, si quisiera eliminar cualquier input con un boton o css como se lo agregaría la función muchsr gracas

  7. Daniel Rivas
    abril 13, 2016 en 5:52 pm

    Amigo, como seria para eliminar un campo?

    • abril 13, 2016 en 6:59 pm

      hola, te dejo acá una solución rápida , falta que manejar algunas cosas pero funciona,

  8. Jonathan Alves
    abril 14, 2016 en 10:36 pm

    Buenas me gustaria saber como hacer pero con un select que me agarre datos de la base de datos que tengo, como seria???

  9. abril 14, 2016 en 10:40 pm

    Buenas hermano, me gustaria saber como hacer esto pero con un select que me agarra informacion de mi base de datos… Gracias!!!

  10. fran
    agosto 12, 2016 en 2:53 am

    Saludos amigo, viendo tu codigo y provandolo está muy excelente y estoy tratando de adaptarlo para un formulario que necesito, pero mis conocimiento de jquery son muy vagos para modificar el js, bien queria consultarte lo siguiente, yo necesito crear 9 campos ya que en cada campo van los datos del personal de cooperativas y asociaciones civiles, bueno el hecho es que hay varias cosas que necesito modificar y queria saber si me puedes orientar si no es mucha molestia, la primera es quitar el contador pues me ocupa espacio y tampoco lo necesito, la otra es como agrego para que me agregue los 9 campo simultaneamente seguidos y claro estos campos son horizontales, y verticalmente se van agregando los 9 campos, gracias de antemano y disculpa la molestia amigo. saludos y exito…

  1. septiembre 6, 2014 en 11:51 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: