2

Mi ajax inserta datos y hace todo bien en el php osea no muestra ningun error, cuando lo ejecuto en el navegador chrome no ejecuta la función, no me muestra el alert ni ejecuta ninguna función que este en el success, pero en firefox muestra el alert pero demasiado rapido y desaparece solo, la única forma de ver el alert es haciendo un paso a paso y/o un breakpoint en source de navegador.

este es mi codigo ajax

function registro() {

var nom = $("#nom").val();
var ape = $("#ape").val();


var parametros = {
    "nom": nom, 
    "ape": ape, 
}

$.ajax({
    url: 'modelo/registro.php',
    type: 'POST',
    dataType: "JSON",
    data: parametros, 
    success:function(datos){
        var data = datos.mensaje;
        if (data == "1") {
            alert("exito");
        } else {
            alert("error");
        }
    },
    error:function(e){
        alert("ERROR EN AJAX");
    }
});  
}

este es mi codigo php

<?php

include("Conexion.php");   

$nom = $_POST['nom'];
$ape = $_POST['ape'];    

$registros = mysqli_query($conexion,"INSERT INTO registro(nombre, Apellido) 
VALUES ('$nom','$ape')");

 if (!$registros) {
  $mensaje = "0";
}

else{
  $mensaje = "1";
}


$respuestaValidacion = array();
$respuestaValidacion["mensaje"] = $mensaje;
$respuesta = json_encode($respuestaValidacion);
echo $respuesta;
?> 

este es mi index, el formulario esta dentro de un modal y se ejecuta por medio de una función cuando detecte el onclick del botón registrar

<div class="modal-body" id="formReg"><br>
<form method="POST" id="formRegistros">
    <div class="row">
        <div class="input-group col-md-6">
            <input id="nom" type="text" name="nom" minlength="2" required/>
            <label for="nom"><i class="fa fa-user"></i> Nombre</label>
        </div>
        <div class="input-group col-md-6">
            <input type="text" id="ape" name="ape" minlength="2" required/>
            <label><i class="fa fa-user-circle"></i> Apellido</label>                           
        </div>
        <button type="submit" class="btn btn-success" id="btnReg" onclick="registro()" disabled="false">REGISTRAR</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
    </div>
</form> 
</div>
12
  • Nunca te lo muestra o te lo muestra despues de un tiempo??
    – Layer
    el 8 may. 2020 a las 1:46
  • solo lo muestra en el navegador de firefox pero un segundo y se desaparece solo, es como si pasar demasiado rápido. pero cuando hago paradas en el source de mi navegador si muestra el alert y hace todo lo que ponga en el success
    – Bell
    el 8 may. 2020 a las 2:13
  • Cuando haces paradas en el source de tu navegador??, como asi paradas??, pones un debugger??
    – Layer
    el 8 may. 2020 a las 2:23
  • @Riven yo creo que se refiere a un breakpoint
    – DarkFrost
    el 8 may. 2020 a las 3:16
  • si solo cuando hago un breakpoint hace la función
    – Bell
    el 8 may. 2020 a las 3:17

2 respuestas 2

1

Hola @Bell Considera cambiar la propiedad type="submit" el siguiente código de HTML como sigue:

<button type="button" class="btn btn-success" id="btnReg" onclick="registro()" disabled="false">REGISTRAR</button>

Esto previene que al finalizar JavaScript de ejecutar la función registro() no realice la función por defecto de submit de los botones de tipo submit.

Eso mismo hace que la ventana te cargue por un tiempo de milisegundos, despues te haga el submit para la misma página.

Otra opción es hacer el cambio utilizando JavaScript como sigue:

<button type="submit" class="btn btn-success" id="btnReg" onclick="registro(this)" disabled="false">REGISTRAR</button>

Por lo que en el JavaScript tu función debe quedar de la siguiente manera:

function registro(event) {  
    //to codigo
    event.preventDefault();
}

Esto hará que se detenga la función por Defecto de submit del button.

Espero te sirva la información.

2
  • 1
    gracias ya pude solucionarlo, era por el type="submit" lo cambie como dijiste a type="button" y ya me funciona
    – Bell
    el 8 may. 2020 a las 23:22
  • Excelente, @bell si la respuesta te resulto útil, te pido que la marques como correcta. Saludos...
    – allexiusw
    el 8 may. 2020 a las 23:33
0

Un formulario se puede procesar por hacer clic en el botón de envío submit o por presionar la tecla ENTER y, por eso, es mejor asignar el evento al formulario y no solo al botón. En este caso, el evento onsubmit, que va a capturar ambas opciones.

Como parámetro se envía el evento para poder detener su ejecución con .preventDefault(), si este el formulario se procesa normalmente, es decir, recargando (o cargando) la página especificada en la acción.

Como no especificaste el atributo action, el navegador procesará el formulario en la misma página, por eso es que no podías ver la alerta o se cerraba.

// Esta función se ejecuta después de que se carga la página
$(function() {
    // Asignar evento a formulario
    $("#formRegistros").on('submit', function(e) { registro(e); });
});

function registro(event) {
    // Evitar comportamiento normal del formulario
    // manteniendo todo en esta misma página
    event.preventDefault();

    var parametros = {
        "nom": $("#nom").val(), 
        "ape": $("#ape").val()
    }

    $.ajax({
        url: 'modelo/registro.php',
        type: 'POST',
        dataType: "JSON",
        data: parametros, 
        success:function(datos){
            var data = datos.mensaje;
            if (data == "1") {
                alert("exito");
            } else {
                alert("error");
            }
        },
        error:function(e){
            alert("ERROR EN AJAX");
        }
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body" id="formReg"><br>
<form method="POST" id="formRegistros">
    <div class="row">
        <div class="input-group col-md-6">
            <input id="nom" type="text" name="nom" minlength="2" required/>
            <label for="nom"><i class="fa fa-user"></i> Nombre</label>
        </div>
        <div class="input-group col-md-6">
            <input type="text" id="ape" name="ape" minlength="2" required/>
            <label><i class="fa fa-user-circle"></i> Apellido</label>                           
        </div>
        <button type="submit" class="btn btn-success" id="btnReg" >REGISTRAR</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
    </div>
</form> 
</div>

1
  • pude solucionar solo cambiando el ´type = "submit"´ pot ´type = "button"´ y ya funciona, mil gracias por la atencion
    – Bell
    el 8 may. 2020 a las 23:27

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.