Header Ads Widget

Ticker

6/recent/ticker-posts

Formulario De Varios Pasos Usando PHP, Bootstrap Y JQuery

 Esta publicación ayuda a comprender el envío de formularios de varios pasos con barra de progreso usando php, jQuery y bootstrp3 . El formulario de varios pasos es una funcionalidad muy útil cuando los datos de entrada del usuario son demasiados y es necesario dividirlos en partes. Dividiremos las entradas del usuario en pasos y asociaremos estos pasos entre sí mediante la navegación como pestañas o píldoras.

Recopilaremos todos los datos de estos pasos y enviaremos todas las entradas en el paso final del formulario HTML . Estoy usando un método que no es ajax para enviar datos usando php, puede usar ajax submit usando jQuery.

Hay los siguientes pasos que se seguirán en este artículo,

  1. Crearemos una interfaz de usuario de varios pasos usando bootstrap.
  2. Navegación del formulario de paso siguiente y anterior usando jquery.
  3. Publique los datos del formulario de todos los pasos y entre en el action.phparchivo.

formulario de varios pasos

Ejemplo Simple De Formulario De Varios Pasos Usando JQuery Y Bootstrap

Creemos un formulario de varios pasos usando bootstrap.

Paso 1: Crearemos un index.phparchivo, donde necesitamos probar este ejemplo de muestra. Necesito incluir archivos de biblioteca jQuery y bootstrap en la headsección de index.phparchivo.

Aquí estoy usando la cdnruta para jquery y bootstrap. También puede usar esta biblioteca localmente y reemplazarla con su ruta.

Paso 2: Creación de una interfaz de usuario HTML para todos los pasos que necesita en forma de varios pasos para seguir al usuario y agregarlos al index.phparchivo.

He creado 3 pasos usando el control de conjunto de campos HTML para cada paso, así que siempre que el usuario haga clic en el botón siguiente y anterior. Deslizaremos el conjunto de campos según el paso actual.

Paso 3: agregue la clase css en la sección del index.phparchivo para ocultar otros pasos, excepto el primer paso.

Paso 4: Usaremos jQuery para ocultar y mostrar el conjunto de campos HTML para la navegación entre los pasos. Debe agregar el siguiente código en el pie de página del index.phparchivo.

Paso 5:action.php archivo creado y agregado debajo del código en este archivo.

Entonces, después de completar todos los pasos, el usuario hará clic en el botón Enviar. Publicaremos todos los datos de los pasos y los enviaremos al action.phparchivo utilizando el atributo de acción del formulario.

Puede descargar el código fuente y la demostración desde el siguiente enlace.

Publicar un comentario

0 Comentarios