0

Tengo un input dinamico que al clickar en el + se aumentan los campos y al pulsar en la x se eliminan, esa función esta por ajax al enviar esos datos quiero que se envíen a un archivo php que procesara los datos insertándolos en la base de datos y luego mostrar un mensaje si se han insertado correctamente, como yo lo tengo al pulsar en el botón para que los envié se envían pero no hace la consulta ni muestra el mensaje

$recibe = $_POST['name']; 
echo $recibe;

    $('#submit').click(function() {
            $.ajax({
                url: "procesoInsertar.php",
                method: "POST",
                data: $('#insertarJugadores').serialize(),
                success: function(data) {
                    $('#mostrar_mensaje').html(data);
                    $('#insertarJugadores')[0].reset();
                }
            });
        });

<div class="">
  <form name="insertarJugadores" id="insertarJugadores">
    <div class="col-md-12">
      <div class="cabecera bg-success text-light p-1">
        <h3 class="ms-3 ">Insertar nombres de los jugadores</h3>
      </div>
      <div class="table-responsive">
        <table class="table" id="dynamic_field">
          <tr>
            <td>
              <input type="text" name="name[]" placeholder="Pulse en el + para introducir jugadores" class="form-control name_list input-group-lg" disabled />
            </td>
            <!-- boton que añade un nuevo campo para introducir valores -->
            <td><button type="button" name="add" id="add" class="btn btn-success">+</button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="modal-footer btnFooter d-flex justify-content-between">
      <!-- <button class="btn btn-primary prevBtn btn-md pull-left disabled-control" type="button" id="previous">Anterior</button>
                    <button class="btn btn-success nextBtn btn-md pull-right" id="next" type="button">Siguiente</button> -->
      <button type="button" class="btn btn-light btn-md close" onclick="redireccionamiento('../php/inde.php')">Cerrar</button>
      <button type="submit" class="btn btn-success" name="submit" id="submit">Reservar</button>
    </div>

  </form>
</div>
<!-- div.btnCaja>div.btnCaja-fila>div.btnCaja-step>a[href="#caja-1"][type="button"].start-class>p{Insertar jugadores} -->
<div id="mostrar_mensaje">0</div>

<?php
require_once('../conexion/conexion.php');
require_once('../php/funciones/funciones.php');
// if(isset($_POST[""]))

$recibe = $_POST['name'];
if (isset($recibe) && !empty($recibe)) {
?>
    <h1>Verificacion de los datos</h1>
    <table class="table">
        <thead>
            <?php
            // ahora el aray de nombres lo vamos a convertir en un string para insertarlo en la columna jugadores
            $datosNombresJugadores=implode(", ",$recibe);
            $identificadorPistas = array(1 => 'Pista_1', 2 => 'Pista_2', 3 => 'Pista_3', 4 => 'Pista_4', 5 => 'Pista_5');
            foreach ($identificadorPistas as $clave => $identificador) {
                // comparamos lo que me devuelve el array con los datos que recibo de post y compruebo si son iguales para obtener el id
                if ($identificador =='Pista_1' ) {//$_POST['modifiTiPista']
                    $parametr = array("pistaTip" => $clave, "jugad" => $datosNombresJugadores);
                    $consultaSql = "INSERT INTO reserva (id, Pista_id, Fecha_Hora, jugadores, Disponibilidad) VALUES (NULL, :pistaTip, CURRENT_TIMESTAMP, :jugad);";
                    $datos = $conexion->prepare($consultaSql);
                    $datos->execute($parametr);
                }
            }
            ?>
        </thead>
    </table>
<?php
} else {
    echo "Mostraremos una alerta";
}

?>

4
  • Y que consulta no se realiza?, falta ese pequeño detalle, podrias mostrarnos?, alli como tal no tienes ninguna consulta.
    – Layer
    Commented el 19 may. 2022 a las 14:47
  • quite la consulta, es decir la comente, para probarlo con un simple echo y que mostrara los datos en un div, pero no lo hace Commented el 19 may. 2022 a las 15:28
  • Me refiero a que la consulta SQL para el insert no esta en el codigo que nos muestras.
    – Layer
    Commented el 19 may. 2022 a las 15:44
  • si es que la quite porque no inserta, pero hay la tienes Commented el 19 may. 2022 a las 15:50

3 respuestas 3

3

A simple vista tienes varios fallos a la vez que pueden estar causando eso que te ocurre. Paso a enumerarlos:

  1. Tienes puesto el atributo disabled en el <input type="text" name="name[]" y como su nombre indica, deshabilita ese campo y no se envia con el submit.

Suponiendo que eso lo corriges al pulsar el boton + y agregar un usuario, sigue leyendo el resto de fallos que veo...

  1. Intentas capturar el evento submit, y lo haces bien, pero te olvidas de deshabilitar su comportamiento por defecto, que es enviar el formulario, el cual termina enviándose por GET refrescando la página y tanto si llega a procesar el ajax/POST como si no, al refrescarse se pierde lo que haya podido obtener.

La forma de solucionar eso es impedir que se ejecute lo que haria un submit normalmente por defecto, agregando el parámetro event a la función del click (no era necesario, en mis pruebas funcionaba sin, pero mejor ponlo), y un event.preventDefault() antes de la llamada al ajax, así:

$('#submit').click(function(event) {
  event.preventDefault()
  $.ajax({

O bien cambiar ese type="submit" por type="button" para que no tenga ningun comportamiento por defecto y no te haga falta bloquearlo.

  1. Suponiendo que eso también esta arreglado, ahora te tocaria lidiar con los valores devueltos en data, pues name lo estás definiendo como un array al ponerlo así: name="name[]", por lo tanto en lugar de devolverte un solo string con un nombre te va a devolver un array con todos los nombres que contenga, que pueden ser solo uno o varios, segun como sea que funcione finalmente tu formulario. Para lidiar con arrays mejor devolverlo con un json_encode() para luego tratarlo mejor en javascript, es decir, quedaría así:
$recibe = $_POST['name']; 
echo json_encode($recibe);

y eso te devolveria un array que podrias tratar en javascript mejor que un string del tipo "Array()".

Ya nos diras si todo esto te ayuda en algo o sigues teniendo problemas relacionados directamente con la pregunta. Si son nuevos te sugiero una nueva pregunta.

4
  • no se me arregla el problema, sigue igual Commented el 20 may. 2022 a las 8:47
  • Pues en mi PC, reproduciendo tu escenario, me llega la respuesta del echo $recibe;. revisa bien los cambios o agrega más información a la pregunta, por ejemplo, asegúrate que estas cargando la libreria jquery, y pruebalo sin pulsar el boton +, sino tal cual. Es decir, haces mis cambios, abres la página y le das al boton Reservar y con eso deberia devolverte Array si no usas el json_encode, o bien [""] si lo usas (sin datos porque el value de nombre está vacio aún)... Si eso no te pasa es que no has aplicado bien los cambios de esta respuesta.
    – masterguru
    Commented el 20 may. 2022 a las 10:54
  • era porque tenia type="POST", que lo había modificado, muchas gracias Commented el 20 may. 2022 a las 11:06
  • Perfecto, me alegro que te haya servido :-) saludos!
    – masterguru
    Commented el 20 may. 2022 a las 11:22
0

El error viene por el parámetro data del AJAX, tendría que ir de la siguiente manera:

$('#submit').click(function() {
            $.ajax({
                url: "procesoInsertar.php",
                method: "POST",
                data: {
                  name: $('#insertarJugadores').serialize(),
                }
                success: function(data) {
                    $('#mostrar_mensaje').html(data);
                    $('#insertarJugadores')[0].reset();
                }
            });
        });

Pasa que el archivo PHP está esperando un parámetro denominado name.

2
  • sigue sin mostrar nada en el div Commented el 19 may. 2022 a las 15:31
  • /insertar.php?name%5B%5D=fdsfsdfsd&submit= con el ejemplo tuyo pasa eso pero no se muestra nada Commented el 20 may. 2022 a las 9:23
0

Cuando se utilizan sentencias preparadas de SQL hay que bindear los parámetros

$consultaSql = "INSERT INTO reserva (Pista_id, Fecha_Hora, jugadores, Disponibilidad) VALUES (?, CURRENT_TIMESTAMP(), ?);";
$datos = $conexion->prepare($consultaSql);
$datos->bind_param('is',(int) $clave, $datosNombresJugadores);
$datos->execute($parametr);
$inserted = $datos->get_result();
1
  • pero he visto que la que yo hice es otra forma parecida Commented el 20 may. 2022 a las 8:49

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.