Agregar y eliminar cuadro de texto de entrada con Jquery, Javascript

¡Hola a todos! Para continuar con la serie de artículos sobre jQuery y Javascript, en este artículo les presento un código breve sobre cómo agregar y quitar elementos de un formulario usando Javascript. El ejemplo específico se centra en un campo de texto de entrada.

En la misma pantalla, podrás agregar y eliminar elementos, incluyendo campos de texto y casillas de verificación, sin necesidad de recargar la página. Al nombrar los elementos como un array, al enviar el formulario PHP se obtendrá el valor de todos los elementos seleccionados.

Agregar y eliminar cuadro de texto de entrada con Jquery, Javascript

1. Biblioteca

Sólo necesitamos Jquery y el css de Bootstrap (aquí usamos bootstrap 3.3.6)

“https://code.jquery.com/jquery-3.5.1.min.js”
“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”

2.HTML

Utilice tablas para mostrar los elementos agregados y eliminados.

// Code php in the download file

3. CSS

.container {
width: 500px;
margin: 0 auto;
}
.add_item{
float: right;
}
.btn_add_item{
margin-top: 10px;
}

4. PHP configurado por defecto

// Data received from Database
// Default input element is 5
$data_program_names = [];
$number_input_default = 5;

5. Javacript

// Add event
$(‘.btn_add_item’).on(‘click’, function () {
// code in the download file…
});

// Delete event
$(document).on(‘click’, ‘.btn_delete_item’, function (e) {
let item_id = $(this).data(‘delete_id’);
$(‘.item_id_’ + item_id).remove();
});

Al eliminar el elemento, debes ponerlo en la etiqueta $ (documento) para que funcione.

Si solo escribe:

$(‘.btn_delete_item’).on(‘click’, function () {})

Entonces no funcionará porque está en el área de procesamiento del script de adición de Javascript.

6. Descargar código de archivo, solo un archivo php

Así que hemos completado el ejemplo de Agregar y quitar cuadro de texto de entrada con Jquery y Javascript.
Gracias por leer este artículo.

Deja un comentario