1

mi pregunta es: estoy enviando datos atraves de ajax al servidor, para eso tengo un poco de codigo en php y js. pero lo que pasa es que cuando los datos son correctos me envia a la pantalla de php diciendome que son correctos mas no me muestra la imagen que quiero que me muestre en mi html cuando los datos so correctos, osea no quiero que me redirija a ninguna pantalla sino que me sobrescriba la imagen en mi html.

<script>
    $(document).on("ready", function () {
        var pet = $('#main form').attr('action');
        var met = $('#main form').attr('method');
        $('#main form').on('submit', function (e) {
            $.ajax({
                breforeSend: function () {
                    $('#status').html('<img src="img/10165.png" alt="" height="25px" width="25px">');
                },
                url: pet,
                type: met,
                data: $('#main form').serialize(),
                success: function (resp) {
                    if(resp == "Correcto")
                    $('#status').html('<img src="img/10165.png">');
                    else
                        console.log(resp)
                },
                error: function (jqXHR, estado, error) {
                    console.log(estado)
                    console.log(error)
                },
                complete: function (jqXHR, estado) {
                    cosole.log(estado)
                },
                timeout: 3000
            })

        })
    })

</script>

y mi funcion en php es:

<?php
$nombre = $_POST["nombre"]; 
$mail = $_POST["mail"]; 

sleep(4); 

if($nombre != "" && $mail != "")
    echo 'correcto';
else
    echo "Incorrecto";

?>

por ultimo mi codigo en html es:

    <div id="main">
     <h1>Formulario de contacto</h1>
     <form action="peticion.php" name="fo" method="POST" autocomplete="on">
      <input type="text" name="nombre" placeholder="Nombre..." >
            <input type="text" name="mail" placeholder="Correo..." >
            <div style="display:block;width:60%;margin:0 auto" >
            <input type="submit" name="send" value="Enviar">
            <div id="status" name="status"></div>

            </div>

     </form>



    </div>


    </body>
4
  • Ese es todo tu php? Ahi no estas recibiendo nada, por eso puede ser que no estas recibiendo la respuesta correcta Commented el 28 feb. 2018 a las 0:11
  • Para que no se llame el archivo del action cuando envías un form, puedes usar preventDefault. De ese modo, seguirás en la página actual. Lo puedes agregar por ej. después de esta línea: $('#main form').on('submit', function (e) {, de este modo: e.preventDefault(); //resto del código.... Si sigues sin tener los resultados esperados, debes compartir el código de tu archivo peticion.php. En el planteamiento de la pregunta no queda claro que estés manejando/devolviendo adecuadamente los datos allí.
    – A. Cedano
    Commented el 28 feb. 2018 a las 0:27
  • Hola buen día, ya anexe mi código completo, perdón soy nuevo en la programación y estoy empezando a conocer ajax, json con ejemplos sencillos pero nos se porque no me muestra la imagen. siempre me muestra la pantalla de correcto, y cuando no tiene datos es incorrecto pero tampoco muestra la imagen. Commented el 28 feb. 2018 a las 3:20
  • ya intente poniendo e.preventDefault(); pero no nada que coje. Commented el 28 feb. 2018 a las 3:26

3 respuestas 3

1

Viendo tu código php tienes un error en lo que devuelves en la llamada ajax, tu código PHP devuelve: correcto e Incorrecto:

if($nombre != "" && $mail != "")
    echo 'correcto';
else
    echo "Incorrecto";

Pero en tu llamada ajax esta esperando Correcto:

success: function (resp) {
           if(resp == "Correcto")
             $('#status').html('<img src="img/10165.png">');
           else
             console.log(resp)
         },

Es decir que si tu condición en PHP se cumpla o no se cumpla, no ejecutara el bloque if de tu llamada ajax, ya que "correcto" no es igual a "Correcto"

Cambia resp == "Correcto" por resp == "correcto" o en tu PHP coloca echo 'Correcto'; para solucionar esto.

EDIT

Si el problema es que se te muestra la misma imagen en ambos casos, es por que en tu llamada ajax tienes

breforeSend: function () {
                    $('#status').html('<img src="img/10165.png" alt="" height="25px" width="25px">');
                },

Y esto esta seteando en tu div $('#status') la misma imagen imagen que en la respuesta de llamada:

if(resp == "Correcto")
  $('#status').html('<img src="img/10165.png">');
else
  console.log(resp)

Ten en cuenta que beforeSend es lanzado antes que la petición ajax comience, por eso antes de que se cumpla tu llamada estas seteando la imagen de correcto.

6
  • Hola amigo igual sigue entrando al php :/ Commented el 28 feb. 2018 a las 4:58
  • A que te refieres con igual sigue entrando al php? Commented el 28 feb. 2018 a las 4:59
  • Pues veras, cuando ingreso el nombre y el usuario que estan el index.html todo va bien pero ya cuado quiero que me cargue el icono no lo carga ni aparece e inmediatamente me redirecciona a peticion.php y me muestra correcto o incorrecto Commented el 28 feb. 2018 a las 5:05
  • Acabo de hacer una edicion a la respuesta. Commented el 28 feb. 2018 a las 5:07
  • El problema es que no me muestra la imagen en ninguno de los casos Commented el 28 feb. 2018 a las 5:14
0

Cuando usas:

$('#main form').on('submit', function (e) {

No estas usando ajax esats dirijiendote a la url de action del form

Creo que deberias cambiar el botón de submit por un

 <a onClick="myFuncionAjax"

usar un evento onClick

-3

<input type="button" name="send" value="Enviar" id="enviar">

$("#enviar").on("click",function(){
});

prueba esto a ver si te sirve yo siempre lo hago asi , en principio tu codigo no tendria que enviarte a ningun php, de echo ajax se hace para que esto no tenga que ocurrir

a parte de esto, puedes crear tu imagen pero mediante css ponerla como hidden y cuando se de tu if y quieras que se vea hacerla visible $("imagen").css("visibility","visible");

4
  • oye que mal concepto de ajax, mi voto de menos uno, y ponte a estudiar un poco.
    – Shassain
    Commented el 27 feb. 2018 a las 23:53
  • porque mal concepto de ajax? no entiendo para nada tu comentario ni tu voto... Commented el 27 feb. 2018 a las 23:55
  • y por eso te dije que te pongas a estudiar
    – Shassain
    Commented el 28 feb. 2018 a las 0:33
  • Gracias amigo por tu ayuda. (Y) :D Commented el 28 feb. 2018 a las 3: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.