Send form with ajax and return errors in a div

Question

Send form with ajax and return errors in a div

Navigation

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

0

I'm using some Boostrap libraries, like the alert balloons, and would like to show them depending on the AJAX result, how can I send a post with AJAX and return the errors / successes in the divs, in this case it's best to return in JSON or plain text, since the errors are independent?

<form action="" method="post">
<input type="text" name="teste" />
<input type="submit" name="post" />
</form>

The back end (PHP) part is already done, and would return JSON, eg:

Error: JSON = > {"error": "1", "name": "incorrect"}

<div class="alert alert-danger fade in">
<p>O form contém erros bla bla</p>
</div>

Success: JSON = > {"error": "0"}

<div class="alert alert-success fade in">
<p>Salvo com sucesso!</p>
</div>

javascript jquery

asked by anonymous 10.10.2016 / 22:02

3 answers

CheckBox All Specific No update of a PL / SQL collection

score 0 · Answer 1

I often use something like this:

<div id="alertaConflito" style="display:none;"><a href="javascript:void(0);">
    <strong id="vaimsg"></strong>
</a></div>

Javascript:

jQuery("#vaimsg").html("Mensagem de Erro ou Sucesso");
$("#alertaConflito").show("fast");

score 0 · Answer 2

I always do this:

$.ajax({
    method: 'POST',
    url: 'http://suaUrl.com',
    data: {
        nomeValor: 'Valor para enviar para o servidor',
        outroValor: 133434
    },
    success: function(data) {
        if(data.error === 1) {
            alert("Nome: " + data.nome);
        } else if(data.error === 0) {
            alert("Nenhum erro encontrado");
        }
    },
    error: function(xhr) {
        alert(xhr.status);
    }
});

score 0 · Answer 3

According to your return you can display the messages of success, attention, error or whatever you wish.

Example:

var msg = function(alerta, texto) {
  var resposta = '';
  $(".resposta").empty();

  switch (alerta) {
    case 'sucesso':
      resposta = "<div class='alert msg btn-success text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    case 'atencao':
      resposta = "<div class='alert msg btn-warning text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    case 'erro':
      resposta = "<div class='alert msg btn-danger text-center' role='alert'>" +
        "   <a href='#' class='close' data-dismiss='alert' aria-label='Close'>&times;</a>" + texto + "</div>";
      break;
    default:
      console.warn('Opção de alerta inválido.');
  }

  $(".resposta").append(resposta);

  $(".msg").click(function() {
    $(this).hide();
  });
};

$("#sucesso").click(function() {
  msg('sucesso', "Mensagem de sucesso!");
});


$("#atencao").click(function() {
  msg('atencao', "Mensagem de atenção!");
});


$("#erro").click(function() {
  msg('erro', "Mensagem de erro!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="resposta"></div>

<button type="button" id="sucesso" class="btn btn-success">Sucesso</button>
<button type="button" id="atencao" class="btn btn-warning">Sucesso</button>
<button type="button" id="erro" class="btn btn-danger">Sucesso</button>