2

Al hacer el envío de cambio de contraseña en el formulario no pasa ningún valor, estoy utilizando AJAX para crear una alerta de éxito del cambio

Este es el form de envío, son varios forms en un mismo archivo validado por si existe un valor post específico de cada uno

<div class="contenedor">
<section class="header-user">
    <h2>Perfil de usuario</h2>
</section>
<div class="contenedor-user">
    <?php
        if (isset($_GET['nombre'])) { 
            $nombre = $_GET['nombre'];
            $apellido = $_GET['apellido'];
            $correo = $_GET['correo'];
            $id = $_SESSION['id'];
    ?>
            <!--================================================
                INFORMACIÓN GENERAL
            ================================================-->
            <section class="informacion-general section-user">
                <div class="titulo-section">
                    <h3>Actualizar información general</h3>
                </div>
                <form action="../inc/functions/user-functions.php" class="contact_form" id="editar-general-form" method="post">
                    <div class="contenedor_entrada">
                        <label for="nombre">Nombre</label>
                        <input type="text" name="nombre" id="nombre" class="input" value="<?php echo $nombre ?>">
                    </div>
                    <div class="contenedor_entrada">
                        <label for="apellido">Apellido</label>
                        <input type="text" name="apellido" id="apellido" class="input" value="<?php echo $apellido ?>">
                    </div>
                    <div class="contenedor_entrada">
                        <label for="correo">Correo Electrónico</label>
                        <input type="email" name="correo" id="correo" class="input" value="<?php echo $correo ?>">
                    </div>
                    <div class="contenedor_entrada enviar">
                        <input type="hidden" name="id" value="<?php echo $id ?>">
                        <input type="submit" value="Enviar" class="boton_ver_mas" id="actualizar-general">
                    </div>
                </form>
            </section>
    <?php
        }
        if (isset($_GET['pass'])) { 
            $id = $_SESSION['id'];
    ?>
            <!--================================================
               Contraseña
            ================================================-->
            <section class="informacion-general section-user">
                <div class="titulo-section">
                    <h3>Cambiar contraseña</h3>
                </div>
                <form action="../inc/functions/user-functions.php" class="contact_form" id="editar-password-form" method="post">
                    <div class="contenedor_entrada">
                        <label for="contrasena">Nueva contraseña</label>
                        <input type="password" name="contrasena" id="contrasena" class="input" >
                    </div>
                    <div class="contenedor_entrada">
                        <label for="passwordRepeat">Repite la contraseña</label>
                        <input type="password" name="passwordRepeat" id="passwordRepeat" class="input">
                    </div>
                    <div class="contenedor_entrada enviar">
                        <input type="hidden" name="id" value="<?php echo $id ?>">
                        <input type="hidden" name="pass" value="1">
                        <input type="submit" value="Enviar" class="boton_ver_mas" id="actualizar-password">
                    </div>
                </form>
            </section>
    <?php
        }
    ?>
</div>

Este es el archivo de respuesta

    include_once 'sesiones.php';

if (isset($_POST['id'])) {

    include_once 'conn.php';

    $nombre = $_POST['nombre'];
    $apellido = $_POST['apellido'];
    $correo = $_POST['correo'];
    $id = $_POST['id'];

    try {
        include_once 'funciones.php';
        //Create new User
        $stmt = $conn->prepare("UPDATE usuarios SET nombre_usuario=?, apellido_usuario=?, correo_usuario=? WHERE id_usuario=?");
        $stmt->bind_param('sssi', $nombre, $apellido, $correo, $id);
        $stmt->execute();
        if ($stmt->affected_rows) {
            $respuesta = array(
                'respuesta' => 'exito'
            );
        } else {
            $respuesta = array(
                'respuesta' => 'error'
            );
        } 
        die(json_encode($respuesta));
        $stmt->close();
        $conn->close();
    } catch (Exception $th) {
        echo "error: " . $th->getMessage();
    }
}
if (isset($_POST['pass'])) {

    include_once 'conn.php';
    echo '<pre>';
        var_dump ($_POST);
    echo '</pre>';
    
    $id = $_POST['id'];
    $password = $_POST['passwordRepeat'];

    $opciones = array (
        'cost' => 12
    );
    $password_hashed = password_hash($password, PASSWORD_BCRYPT, $opciones);

    try {
        include_once 'funciones.php';
        //Create new User
        $stmt = $conn->prepare("UPDATE usuarios SET contraseña=? WHERE id_usuario=?");
        $stmt->bind_param('si', $password_hashed, $id);
        $stmt->execute();
        if ($stmt->affected_rows) {
            $respuesta = array(
                'respuesta' => 'exito'
            );
        } else {
            $respuesta = array(
                'respuesta' => 'error'
            );
        } 
        die(json_encode($respuesta));
        $stmt->close();
        $conn->close();
    } catch (Exception $th) {
        echo "error: " . $th->getMessage();
    }
}

Y por último este es archivo JS con el AJAX, temporalmente desactive el preventDefault() para poder examinar el action del formulario

var actualizarGeneral = document.getElementById("actualizar-general");
var actualizarPassword = document.getElementById("actualizar-password");
if (actualizarGeneral) {
actualizarGeneral.addEventListener('click', function () {
    document.getElementById("editar-general-form").addEventListener('submit', function (e) {
        e.preventDefault();
        var datos = $(this).serializeArray();

        $.ajax({
            type: $(this).attr('method'),
            data: datos,
            url: $(this).attr('action'),
            dataType: 'json',
            success: function (data) {
                var resultado = data; 
                if (resultado.respuesta =="exito") {
                    Swal.fire({
                        title: 'Correcto',
                        text: "Información actualizada correctamente!",
                        icon: 'success',
                        showConfirmButton: false
                    })
                    setTimeout(function () {
                        window.location.href = 'user-app';
                    },1000);
                } else {
                    Swal.fire(
                        'Error!',
                        'Hubo un error, inténtalo de nuevo más tarde!',
                        'error'
                    )
                }
            }
        })
    });
});
}
if (actualizarPassword) {
actualizarPassword.addEventListener('click', function () {
    document.getElementById("editar-password-form").addEventListener('submit', function (e) {
        //e.preventDefault();
        pass = document.getElementById('contrasena').value;
        password = document.getElementById('passwordRepeat').value;
        var datos = $(this).serializeArray();
        if (pass.length == 0) {
            Swal.fire(
                'Error!',
                'Ingresa una contraseña',
                'error'
            )
        } else {
            if (pass.length < 8) {
                Swal.fire(
                    'Error!',
                    'Ingresa una contraseña mayor a 8 caracteres',
                    'error'
                )
            } else {
                if (pass != password) {
                    Swal.fire(
                        'Error!',
                        'Las contraseñas no coinciden',
                        'error'
                    )
                } else {
                    $.ajax({
                        type: $(this).attr('method'),
                        data: datos,
                        url: $(this).attr('action'),
                        dataType: 'json',
                        success: function (data) {
                            var resultado = data; 
                            if (resultado.respuesta =="exito") {
                                Swal.fire({
                                    title: 'Correcto',
                                    text: "Información actualizada correctamente!",
                                    icon: 'success',
                                    showConfirmButton: false
                                })
                                // setTimeout(function () {
                                //     window.location.href = 'user-app';
                                // },1000);
                            } else {
                                Swal.fire(
                                    'Error!',
                                    'Hubo un error, inténtalo de nuevo más tarde!',
                                    'error'
                                )
                            }
                        }
                    })
                }
            }
        }
    });
});
}

El primero formulario funciona perfectamente por lo que se están comunicando correctamente, al menos en el primer formulario y en ambos casos es el mismo archivo de respuesta Esto es lo único que muestra el action y tiene un var_dump a post, debería mostrar algún valor Respuesta

1
  • 1
    Para evitar la confusión que indicas en la respuesta, considera agregar al objeto data de Ajax una clave action que identifique más propiamente cada acción, así puedes verificar con más claridad. Por ejemplo, si pasas un par: action: 'login' o action: 'update' Luego en el servidor recuperas: $mAction=['action']; y luego, if($mAction==='login') { //código para login } else { //codigo para update} Si hay más acciones podrías pensar en un switch ... case u otro. Por último, no uses $_GET si el método del form es post. Esto podría darte problemas.
    – A. Cedano
    Commented el 24 mar. 2021 a las 22:17

2 respuestas 2

1

Al momento que te llega la data del ajax debes hacer JSON.parse() pues lo que te llega es un texto normal, tienes que decirle a JS que lo convierta a un objeto de JS.

success: function (data) {
      var resultado = JSON.parse(data); 
1
  • 1
    Voto en contra de esta respuesta porque es totalmente falsa. Si pones dataType: 'json' en la petición Ajax (como de hecho hace OP), no hay que hacer JSON.parse() a la respuesta, pues Ajax hace el parse de por sí. Ver dataType en la documentación: If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.
    – A. Cedano
    Commented el 24 mar. 2021 a las 22:07
1

Encontré la solución, la validación del action estaba mal, al validar el $_POST['id'] del form de arriba también se mandaba este valor en el de abajo entonces tomaba el prepare statement de arriba

Solución: Validar con otro campo en este caso 'nombre'

if (isset($_POST['nombre']))

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.