problem with ajax and php

Question

problem with ajax and php

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-3 votes)

1

my question is: I am sending data through ajax to the server, for that I have a bit of code in php and js. but what happens is that when the data is correct it sends me to the php screen telling me that they are correct but it does not show me the image that I want to show in my html when the data is correct, I do not want to redirect me to any screen but I overwrite the image in my 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>

and my function in php is:

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

sleep(4); 

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

? >

Finally my code in html is:

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

javascript ajax

asked by juancamilovallejos0 28.02.2018 в 00:08

source

3 answers

Load DateTime in c # in dd / mm / yyyy format The recipient did not understand the heading 'Security' Web Service

score 1 · Answer 1

Seeing your php code you have an error in what you return in the ajax call, your PHP code returns: correct and incorrect:

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

But in your ajax call you are waiting Correct:

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

That is to say that if your condition in PHP is met or not, it will not execute the if block of your ajax call, since "correcto" no es igual a "Correcto"

Change resp == "Correcto" by resp == "correcto" or in your PHP place echo 'Correcto'; to solve this.

EDIT

If the problem is that you are shown the same image in both cases, it is because in your ajax call you have

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

And this is setting in your div $('#status') the same image image as in the call response:

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

Note that beforeSend is thrown before the ajax request begins, so before your call is fulfilled you are setting the correct image.

score 0 · Answer 2

When you use:

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

You are not using ajax esats by going to the action URL of the form

I think you should change the submit button for a

 <a onClick="myFuncionAjax"

use an onClick event

score -3 · Answer 3

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

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

try this to see if it works for you I always do it that way, in principle your code would not have to send you to any php, in fact ajax is done so that this does not have to happen

Apart from this, you can create your image but using css, put it as hidden and when you know if you want it to be visible $ ("image"). css ("visibility", "visible");