0

Soy principiante en el mundo de las páginas web, por lo que tratare de dar mi máximo esfuerzo en cuanto a la explicación de mi duda presentada.

Estoy haciendo el uso de la herramientas del lenguaje de programación PHP, junto con; HTML, Java script, y el servidor Xamp. Mi intención es realizar un formulario de preguntas, que por el momento muestra la vista para el usuario. En dicho formulario, estoy implementando las funciones de dos botones, uno que me permita agregar inputs de forma dinámica y otro botón que me permita eliminar el input que no necesito.

El problema que se me presenta es: Si me permite agregar los inputs, pero el botón de eliminar no esta funcionando, ya que únicamente funciona para el primer elemento que se visualiza por defecto en la página. HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <link rel = "stylesheet"  href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >      <!---  ----> 
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <link rel="stylesheet" href="../Encuesta/Estilos/preguntas113.css">
        <script src="../Encuesta/JavaScript/Eventos.js"></script>




        <!------ Include the above in your HEAD tag ---------->
    </head>

    <body>
        <?php
        include '../Administradores/Conexion.php';

        if ($_POST) {

            $insertarP = filter_input(INPUT_POST, 'InsertarPregunta');

            $mysqli->query("INSERT INTO preguntas_inmujer (Pregunta) VALUES ('$insertarP')");

            /* Comprueba la conexión */
            if ($mysqli->error) {
                echo "error" . $mysqli->error;

                /*  */
            } else {
                ?>            
                <script  type="text/javascript"   language = "javascript"> /* libreria de JQuery */
                    function validar()
                    {
                        var ok = true;

                        if (document.getElementById("InsertarPregunta").value == "")
                        {
                            alert("Introduzca todos los datos");
                            ok = false;
                        }

                        return ok;
                    }
                </script>

                <?php
            }
        }

        /* Cierra la conexión */
        $mysqli->close();
        ?>








        <form class="form" method="post" action="" onsubmit="">

            <div  class="container register-form" id=""  >
                <div class="form">
                    <div class="note">
                     <!------     <p>This is a simpleRegister Form made using Boostrap. </p>enlaces del encabezado ----------> 

                    </div>

                    <div class="form-content" id="addAnswer"  onsubmit="return ok();"  >
                        <div class="row">
                            <div class="col-md-12" id="EliminarCuadrito"> <!------ los ID estan siendo llamados en javaScript ----------> 
                                <div class="form-group" id="EliminarCuadro"> 
                                    <br> <input id="pregunta" type="text" name="InsertarPregunta" class="form-control" placeholder="Escribe su pregunta" required >
                                </div>

                                <!------    pie de pagina del contenedor ----------> 
                                <div class="card-footer text-muted" id="RemoveBoton">
                                    <button id="botonEliminar" type="button" class="btn btn-secondary">Eliminar</button> <br>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button id="generarEncuesta" name="btnEnviar" type="submit" value="RalizarEncuesta" class="btnSubmit" >Generar Encuesta</button>
                    <button id="add" name="GuardaPregunta" type="button" class="btn btn-secondary">Añadir pregunta</button>
                </div>
            </div>
        </form>
    </body>
</html> 
java script
/* Añadir pregunta*/
$(document).ready(function () {
    var i = 1;
    $('#add').click(function () {
        i++;
  $('#addAnswer').append('<br><input id="pregunta' + i + '" type="text" name="InsertarPregunta" class="form-control" placeholder="Escribe su pregunta" required><br>',
        '  <button id="botonEliminar '+i+'" type="button" class="btn btn-secondary">Eliminar</button> <br>');

    });
}
);


/* Evento para eliminar un elemento div del html*/
$(document).ready(function(){
$('#botonEliminar').click(function(){
    $('#EliminarCuadrito').remove(); 
});
});




/* Validación del botón enviar encuesta*/
function validar()
{
    var ok = true;

    if (document.getElementById("InsertarPregunta").value == "")
    {
        alert("Introduzca todos los datos");
        ok = false;
    }

    return ok;
}

1 respuesta 1

0

Te menciono unas observaciones que he notado:

  • Veo que usas jQuery y a la vez haces rutinas de selección de elementos usando: document.getElementById que es el modo de hacerlo a JS puro, espero sepas diferenciar esos aspectos ya que jQuery tiene métodos propios que no funcionarían en los elementos tarjeteados usando por ejemplo document.getElementById.

  • Otro es que cuando quieres eliminar elementos intentas targetear usando $('#botonEliminar') pero a la vez tus elementos dinámicos van siendo sus ids: botonEliminar1, botonEliminar2 entonces nunca harías target a menos que targetees por prefijo usando por ejemplo $('button[id^=botonEliminar]'), pero aún así al ser dinámicos si mal no recuerdo para poder targetearlos necesitas un contexto al cual referirte que tiene que ser cargado al inicio de la página, en otras palabras necesitas que todos tus buttons que serán dinámicos sean contenidos por un elemento padre, entonces harías referencia a él y luego al button por su id por prefijo, de la siguiente manera $('#container).on('click', 'button[id^=botonEliminar]', function () { ... }).

  • Una solución más sencilla sería la siguiente: asignarles a los buttons en su evento onclick ejecutar una función y pasarse el elemento como contexto, luego buscar su contenedor padre y eliminarlo, como a continuación:

const $add = $('#add')
const $addAnswer = $('#addAnswer')

$add.click(function () {
  $addAnswer.append('<div><input type="text" name="InsertarPregunta[]" class="form-control" placeholder="Escribe su pregunta" required><br><button onclick="remove(this)" type="button" class="btn btn-secondary">Eliminar</button> </div>')
})

function remove(item) {
  $(item).closest('div').remove()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="addAnswer">
</div>

pd: también recuerda que deberás enviar los inputs como un array con la propiedad name="InsertarPregunta[]"

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.