Request Ajax in Forms

Asked

Viewed 55 times

0

I made an ajax request to send the data from a form to the server, the data is sent and stored perfectly. But when processing the Success creating the condition, should the return of result were the standard 200 or "OK" would send a message of success and if not, the error message. However, in doing so I realized that the result was not returning because it already fell straight into Isis. And even dropping ELSE, it stores the data on the server, but throws the error message. 

function showMessageError(message)
    {
      document.getElementById("errorMsg").innerHTML = message;
      $("#divError").fadeIn(200).delay(2500).fadeOut(200);
    }

>

function sendForm()
{

  $("#divSucesso").hide();
  $("#divError").hide();

  document.getElementById("btnEnviarForm").disabled = true;
  var formAgenda = document.getElementById("form");
  var formData = new FormData (formAgenda);

  $.ajax({
  url: 'insert.php',
  method: "POST",
  data: formData,             
  cache: false,
  processData: false,
  contentType: false,

  success: function (result) {

      if (result.statusText == "OK")
      {
        document.getElementById("sucessoMsg").innerHTML = "Dados salvos com sucesso: " + result;
        $("#divSucesso").stop().fadeIn(200).delay(2500).fadeOut(200);
        document.getElementById("btnEnviarForm").disabled = false;
        document.getElementById("form").reset();
      }
      else
        showMessageError(result);
    },
    error: function (xhr, status, error) {                
      var errorMsg = xhr.responseText;
      document.getElementById("errorMsg").innerHTML = errorMsg;
      $("#divError").fadeIn(200).delay(2500).fadeOut(300);
      document.getElementById("btnEnviarForm").disabled = false;
    }

  })
}
php javascript ajax front-end

  • Gabriel, could you pass the error that is happening? So I have a parameter to investigate.

  • @Mateussaggin there that is expensive. He is not indicating what is the mistake, I am not understanding.

  • @Mateussaggin, he’s kind of not getting into the IF, so don’t

  • has some link running this script?

  • @Mateussaggin, I’ve rearranged my question, maybe it’s a little clearer. And in reply, I’m testing at WAMP locally.

  • You could post the code of Insert.php?

Show 1 more comment

1 answer

0

Fala @Gabriel,

Now I understand your question, I would change the code to treat the 200 and not the OK. Following example:

function sendForm() {

    $("#divSucesso").hide();
    $("#divError").hide();

    document.getElementById("btnEnviarForm").disabled = true;
    var formAgenda = document.getElementById("form");
    var formData = new FormData(formAgenda);

    $.ajax({
        url: 'insert.php',
        method: "POST",
        data: formData,
        cache: false,
        processData: false,
        contentType: false,

        success: function(xml, textStatus, xhr) {

            if (xhr.status === '200') {
                document.getElementById("sucessoMsg").innerHTML = "Dados salvos com sucesso: " + textStatus;
                $("#divSucesso").stop().fadeIn(200).delay(2500).fadeOut(200);
                document.getElementById("btnEnviarForm").disabled = false;
                document.getElementById("form").reset();
            } else {
                showMessageError(textStatus);
            }

        },
        error: function(xhr, status, error) {
            var errorMsg = xhr.responseText;
            document.getElementById("errorMsg").innerHTML = errorMsg;
            $("#divError").fadeIn(200).delay(2500).fadeOut(300);
            document.getElementById("btnEnviarForm").disabled = false;
        }

    })
}

But if you want to handle the return of your server, it is also possible. Just give one console.log(result), using the code you sent and check if it is actually being returned OK in the attribute result.statusText

Browser other questions tagged php javascript ajax front-end

You are not signed in. Login or sign up in order to post.