JQuery Se a condição exibir mensagem com base em submissão ou falha - javascript, php, jquery, ajax, forms

Eu estou aprendendo Jquery e AJAX sozinho através de tutoriais on-line e postando em SO quando eu fico preso, por isso, tenha em mente que eu sou um novato, se você tiver a gentileza de responder a minha pergunta.

Eu tenho um formulário dentro de um modalbox. O Ajax impede que ele feche / recarregue e uma mensagem é exibida após o envio, como você pode ver na imagem abaixo:

Meu problema

As mensagens de sucesso e fracasso sãoexibido. Eu gostaria de mudar isso para que 1) Mensagem de sucesso seja exibida no envio bem-sucedido ou 2) a mensagem de falha seja exibida no envio com falha:

Minha forma

 <div id="inline3" style="width:400px;display: none;">
<h3>Contact Us</h3>
<form name="message-form" action="" id="contact-form" method"post">
Message<br /> <input type="text" name="msg" value="" /><br />
<input type="submit" value="Contact Us" name="contact" class="buttono" />
</form>
<div class="form-feedback" style="display:none">
Thank You We will Get Back to you
</div>
<div class="form-feedback" style="display:none">
Ooops....Something Went Wrong
</div>
<div>

JQUERY

$(function(){
$("#contact-form").submit(function(e){
e.preventDefault();

$form = $(this);

$.post(document.location.url, $(this).serialize(), function(data){
$feedback = $("<div>").html(data).find(".form-feedback").hide();
$form.prepend($feedback)[0].reset();
$feedback.fadeIn(1500)
})

});
})

Se alguém puder me dar um pouco de ajuda ou aconselhar, será muito bem recebido.

Obrigado pela leitura

Respostas:

0 para resposta № 1

A primeira coisa que gostaria de fazer é mudar o backendque ao invés de retornar html ele retornará json contendo apenas a informação que você precisa (como se a submissão foi um sucesso ou falha e quaisquer outras mensagens, etc.).

Então a solução mais fácil que me vem à mente é dar a cada uma das suas duas identificações de mensagem de feedback:

<div id="form-feedback-success" class="form-feedback" style="display:none">
Thank You We will Get Back to you
</div>
<div id="form-feedback-error" class="form-feedback" style="display:none">
Ooops....Something Went Wrong
</div>

Mantenha os nomes das classes para que você possa usar o css para estilizar os dois de maneira semelhante.

Em seguida, em sua verificação de javascript para um sinalizador de sucesso ou falha. Com base na bandeira, exiba uma ou outra div baseada no id:

$.post(document.location.url, $(this).serialize(), function(data){
if(data.success) {
$("#form-feedback-success").fadeIn(1500);
}
else {
$("#form-feedback-error").fadeIn(1500);
}
});

Você pode precisar fazer algumas tweeks (como desserializar a resposta de json para um objeto), mas essa é a essência disso.

---