Thank You message not displayed after Form submission

Question

I was trying to display a thank you message in the same page after the submission of a form. However, even though the form gets submitted correctly, the message does not gets displayed.

I'm using the following javascript to cater to this:

$(function () 
        {
            $('form').submit(function (e) 
            {
                e.preventDefault();
                $.ajax(
                {
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) 
                    {
                        if(result.indexOf("success") > -1)
                        {
                            document.getElementById("thankyou_message").style.display = "inline";
                        }
                    }
                });
            });
        });

The response of the url is something like this:

{"result":"success","data":...

I've my code in the following codepen URL: http://codepen.io/abbor123/pen/EgjLdR

Can you please throw some light into the issues with my coding that is hampering the display of the text in the page?

PS: I'm a beginner and hence I request you to be gentle on me. :)

Thanks. AB

Answer 1

I think that you should try this code if your sample data is right :

if(result.result.indexOf("success") > -1){
 document.getElementById("thankyou_message").style.display = "inline";
}

You are doing indexOf in JSON object you should do this on the string

http://www.w3schools.com/jsref/jsref_indexof.asp

Answer 2

from the response you posted, I assume that you got a json response. then you can check it like this.

success: function(response) {
    if(response.result == 'success') {
      document.getElementById("thankyou_message").style.display = "inline"; 
    } else {
      document.getElementById("thankyou_message").style.display = "none";
    }
}

check this sample code, which returns a json response. https://gist.github.com/rashivkp/ef581ea4f4d4e7fba90086ea2c6bb5d2

Answer 3

try replace:

document.getElementById("thankyou_message").style.display = "inline";

to:

$('#thankyou_messa').fadeIn();