JQuery If a Status Message Is Displayed Based on a View or Failure

I learn JQuery and AJAX myself, using online tutorials and publishing SO when I get stuck, so please keep in mind that I'm new if you are so kind as to answer my question.

I have a form inside modalbox. Ajax prevents it from closing / reloading, and the message appears after sending, as you can see in the image below:

enter image description here

My problem

Success and failure messages are displayed. I would like to change this so that 1) a success message is displayed on a successful presentation or 2) an error message is displayed on a failed feed:

My form

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

    });
})

If anyone can give me some help or advise here, he will be much appreciated.

Thanks for reading

+4
1

, , , html json, (, , ..).

, , , div :

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

, css, .

javascript . div id:

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

, (, json ), .

0

All Articles