2

Estoy dando mis primeros pasos en AJAX y estoy con mi primer inconveniente a la hora de enviar un formulario sin que recargue la página. Lo que intento hacer es un "envio de solicitud de amistad" y quiero que una vez enviado los datos del formulario el boton de "enviar solicitud" cambie a "cancelar solicitud", pero simplemente queda igual aunque si se envian los datos. "Cancelar solicitud" sería tambíen un botón que haría el mismo procedimiento sólo que al revés y en lugar de insertar, eliminaría.

//EDICIÓN COMPLETA DE CODIGO DEBIDO A QUE ESTABA MAL PLANTEADO EL DESARROLLO DEL MISMO AUNQUE CONTINUA ESTANDO MAL

    <?php
      if ($estadoA['estado'] == 0){ //SI EN LA BDD NO HAY RELACION ENTRE USUARIOS
        $boton="Enviar solicitud de amistad";
      } else {
        $boton="Cancelar solicitud";
      }
      ?>

      <button id="solicitud" onclick="enviar2('<?php echo $_SESSION['user_id']?>','<?php echo $_GET['id']?>')">
         <?php echo $boton;?>
      </button>

FUNCTIONS.JS

function enviar2(emisor,receptor){
  b=$('#solicitud').html();
  if(b=="Enviar solicitud de amistad"){
    url="../amigos/solicitud-enviada.php";

  } else {
    url="../amigos/eliminar-solicitud.php";
  }

  cadena= "emisor=" + emisor + "&receptor=" + receptor;
  alert(url);
   $.ajax({
    type:'POST',
    url:url,
    data:cadena,
    success:function(r){
      if (r!=0) {
        alert($('#solicitud').html());
        if (b=="Enviar solicitud de amistad"){
          $('#solicitud').html("Cancelar solicitud");
        } else{
          $('#solicitud').html("Enviar solicitud de amistad");
        }
        alert($('#solicitud').html());
      } else {
        alert('error');
      }

    }
  });
  return false;
}

Como verán, redirecciono la url según el valor obtenido por el id del botón pero lo hace mal, supongamos que no hay relación entre los usuarios deberia decir "Enviar solicitud", una vez que doy click he visto mediante un alert, que se redirecciona al eliminar en lugar de que sea a solicitud-enviada, es decir, no cumple la función requerida, aunque curiosamente, sin recargar la página y darle nuevamente al boton, hace todo correctamente. Eso quiere decir que el valor inicial al cargar la página me está mandando un valor incorrecto el id del botón, agradecería si me pueden decir que estoy haciendo mal.

5
  • Yo Creería que el POST en minúscula debe afectar... una vez me pasó algo similar y resultó ser eso y estuve 2 semanas buscando el problema, prueba lo y me cuentas 🤘🏻
    – Dante
    Commented el 16 jul. 2020 a las 14:58
  • Lo cambié y nada, sigue funcionando igual, aunque seria muy molesto que ese fuese el error jajaja
    – Marcos
    Commented el 16 jul. 2020 a las 15:34
  • Añade a tu función enviar_2() la línea event.preventDefault(); ya que el comportamiento normal de un formulario al hacer el submit es realizar un redireccionamiento, con ello lo previenes. Saludos. Commented el 16 jul. 2020 a las 16:05
  • Lo agregué y sigue realizando lo mismo, recién edité la pregunta asi se puede comprender mejor
    – Marcos
    Commented el 16 jul. 2020 a las 16:17
  • Deberías cambiar el valor del botón dentro del success
    – Bicho
    Commented el 16 jul. 2020 a las 16:37

2 respuestas 2

5
+50

Opción sin formulario, solo con un botón

Pensando en una solución más sencilla, usando solo un botón y dataset para asignar los valores sin tener que crear un formulario ni elementos ocultos:

En PHP solo necesitas asignar el valor que corresponda el botón, usando asignación ternaria simplificar el código.

<?php
$boton = ($estadoA['estado'] == 0) ? 'Enviar solicitud de amistad' : 'Cancelar solicitud'; 
?>
   <button id="amistad" data-emisor="<?php echo $_SESSION['user_id'];?>" data-receptor="<?php echo $_GET['id'];?>"><?php echo $boton; ?>"</button>

En javascript, cada que se hace clic en el botón:

  • Analizas el valor actual para saber si se va a crear o eliminar la solicitud
  • Tomas emisor y receptor desde dataset, .data() con jQuery
  • De acuerdo a la acción usas una URL u otra
  • Realizas la petición AJAX
  • Actualizas el valor del botón cuando la petición sea exitosa

// Asignar evento al formulario
$('#amistad').on('click', enviar);

function enviar(event){
    // Creo que no sería necesario, pero no está de más
    event.preventDefault();

    // Obtener emisor y receptor
    let emisor = $('#amistad').data('emisor');
    let receptor = $('#amistad').data('receptor');
    // Obtener valor de botón
    let boton = $('#amistad').text();
    // Crear URL y cambiar valor del botón
    let url;
    if(boton == 'Enviar solicitud de amistad') {
        url = '../amigos/solicitud-enviada.php';
    } else {
        url = '../amigos/eliminar-solicitud.php';
    }
    console.log(emisor, receptor, url);

    $.ajax({
        type:'post',
        url:url,
        data:'emisor='+emisor +'&receptor='+receptor,
        success:function(resp){
            $("#respas2").html(resp);
            if(boton == 'Enviar solicitud de amistad') {
                $('#amistad').text('Cancelar solicitud');
            } else {
                $('#amistad').text('Enviar solicitud de amistad');
            }
        }
    });
    // ********** Borrar desde aquí ***********
    // Solo para comprobar que el botón cambia
            if(boton == 'Enviar solicitud de amistad') {
                $('#amistad').text('Cancelar solicitud');
            } else {
                $('#amistad').text('Enviar solicitud de amistad');
            }
    // Borra este bloque, solo debe pasar cuando la petición AJAX se realizó
    // ******** Hasta aquí ********************    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="amistad" data-emisor="5" data-receptor="10">Enviar solicitud de amistad</button>

Opción anterior, con formulario

Para este ejemplo eliminé el evento en línea de la etiqueta form (también es una mala práctica), agregando ID, dejando los input para emisor y receptor y agregando ID al botón para poder tomar su valor más fácilmente.

<?php
$boton = ($estadoA['estado'] == 0) ? 'Enviar solicitud de amistad' : 'Cancelar solicitud'; 
?>
   <form id="amistad" method="post">
      <input type="hidden" name="emisor" id="emisor" value="<?php echo $_SESSION['user_id'];?>">
      <input type="hidden" name="receptor" id="receptor" value="<?php echo $_GET['id'];?>">
      <input type="submit" name="enviar" id="boton" value="<?php echo $boton; ?>">
      <div id="respas2"></div>
   </form>

Ejemplo con formulario:

// Asignar evento al formulario
$('#amistad').on('submit', enviar);

function enviar(event){
    // Evitar que el formulario se procese normalmente
    event.preventDefault();

    // Obtener emisor y receptor
    let emisor = $('#emisor').val();
    let receptor = $('#receptor').val();
    // Obtener botón
    let boton = $('#boton').val();
    // Crear URL y cambiar valor del botón
    let url;
    if(boton == 'Enviar solicitud de amistad') {
        url = '../amigos/solicitud-enviada.php';
    } else {
        url = '../amigos/eliminar-solicitud.php';
    }
    console.log(emisor, receptor, url);

    $.ajax({
        type:'post',
        url:url,
        data:'emisor='+emisor +'&receptor='+receptor,
        success:function(resp){
            $("#respas2").html(resp);
            if(boton == 'Enviar solicitud de amistad') {
                $('#boton').val('Cancelar solicitud');
            } else {
                $('#boton').val('Enviar solicitud de amistad');
            }
        }
    });
    // ********** Borrar desde aquí ***********
    // Solo para comprobar que el botón cambia
            if(boton == 'Enviar solicitud de amistad') {
                $('#boton').val('Cancelar solicitud');
            } else {
                $('#boton').val('Enviar solicitud de amistad');
            }
    // Borra este bloque, solo debe pasar cuando la petición AJAX se realizó
    // ******** Hasta aquí ********************    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="amistad" method="post">
    <input type="hidden" name="emisor" id="emisor" value="5">
    <input type="hidden" name="receptor" id="receptor" value="10">
    <input type="submit" name="enviar" id="boton" value="Enviar solicitud de amistad">
    <div id="respas2"></div>
</form>

Nota: El código javascript debe estar hasta abajo, antes de </body> o dentro de una función que se ejecute cuando el DOM se haya cargado.

5
  • 1
    Muchas gracias por la respuesta y también por la aclaración acerca de la asignación ternaria, me puede ser muy útil en js. Puse las referencias que me diste, sin embargo la pagina recarga sin enviar siquiera los datos. Estoy tratando de razonarlo pero yo lo veo correcto aunque tal vez algo se me escapa porque como te digo, estoy aprendiendolo
    – Marcos
    Commented el 16 jul. 2020 a las 18:18
  • Revisa la actualización, incluí un fragmento de código para probar aquí mismo el funcionamiento.
    – Triby
    Commented el 24 jul. 2020 a las 14:59
  • 1
    El botón no debería ser un submit. Con un humilde botón, basta.
    – Alfabravo
    Commented el 24 jul. 2020 a las 15:23
  • @Alfabravo, muy interesante tu observación, tanto que me hace replantear la necesidad de un formulario, porque esto puede funcionar solo con un botón o enlace. Gracias, voy a agregar esa opción a la respuesta.
    – Triby
    Commented el 24 jul. 2020 a las 15:33
  • 1
    Ahora si, lo he probado y funciona correctamente! Muchisimas gracias por toda la explicación y por haberte tomado el tiempo
    – Marcos
    Commented el 24 jul. 2020 a las 17:08
-1

no veo que estés cambiando el nombre al botón
primero crea otra var que del boton enviar con el id enviar2Bis

 var enviar2Bis=document.getElementById('enviar2Bis').value;

despues dentro del success

enviar2Bis .value = "CANCELAR"; 

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.