Ajax Request on Forms

Question

Ajax Request on Forms

Navigation

#1 by (0 votes)

0

I made an ajax request to send data from a form to the server, the data is sent and stored perfectly. But when handling success creating the condition if the return return was the 200 or "OK" pattern would send a success message and if not, the error. However, when I did this, I realized that the result was not returning because it was already falling on the else. And even if it drops ELSE, it stores the data on the server, but it 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

asked by anonymous 30.05.2018 / 18:35

1 answer

Error pyttsx3.init ('sapi5') in Python FileReader with VueJS

score 0 · Answer 1

Speak @Gabriel,

Now I understand your question, I would change the code to treat 200 and not OK . Here's an 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, you can too. Just give console.log(result) , using the code you sent and check if OK is actually being returned in the result.statusText attribute