Ingresar formulario sin recargar la página

Question

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.

ajax formularios php

Triby · Accepted Answer

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.

Correct answer by Triby on August 27, 2021

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";

Answered by Francisco Rodriguez on August 27, 2021

Francisco Rodriguez · Answer

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";

Ingresar formulario sin recargar la página

2 Answers

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

Opción anterior, con formulario

Add your own answers!

Ask a Question