How do i give/show success message after submitting new form sucessfully

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
    $(document).ready(function() {
        /*
            Contact form
        */
        $('.contact-us').submit(function(e) {

            e.preventDefault();
            $('.contact-us input, .contact-us textarea, .contact-us select').removeAttr('style');
            $('.error').remove();


            var postdata = $('.contact-us').serialize();
             
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                data: postdata,
                dataType: 'json',
                success: function(returned_data) {
                    var submit_ok = true;                
                    var j = 0; 
                    
                   
                    $.each(returned_data, function(key, value) {
                        if(value != '') {
                            $('.contact-us .' + key).attr('style', 'border-color: #ff5252; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;');
                            $('.contact-us .' + key).focus();
                            //$('.contact-us').append('<div class="error"> ' + value + '</div>');
                            $('.error').css('top', (108 + j*60) + 'px');
                            $('.error').fadeIn('slow');
                            submit_ok = false;
                            //return false;
                        }
                        j++;
                    });               
                    if(submit_ok) {
                        alert('Submitted Successfully');
                        $('.contact-us').append('<p style="display: none;">Thanks for contacting us! We will get back to you very soon.</p>');
                        $('.contact-us input, .contact-us textarea, .contact-us select, .contact-us button').remove();
                        $('.contact-us p').fadeIn('slow');
                        setTimeout(redirectTo,3000);
                    }
                },
            });
        });

    });
    function redirectTo()
    {window.location.href = "https://www.google.co.in/"}


<!-- end snippet -->

$(document).ready(function() {
    /*
        Contact form
    */
    $('.contact-us').submit(function(e) {

        e.preventDefault();
        $('.contact-us input, .contact-us textarea, .contact-us select').removeAttr('style');
        $('.error').remove();


        var postdata = $('.contact-us').serialize();
         
        $.ajax({
            type: 'POST',
            url: 'contact.php',
            data: postdata,
            dataType: 'json',
            success: function(returned_data) {
                var submit_ok = true;                
                var j = 0; 
                
               
                $.each(returned_data, function(key, value) {
                    if(value != '') {
                        $('.contact-us .' + key).attr('style', 'border-color: #ff5252; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;');
                        $('.contact-us .' + key).focus();
                        //$('.contact-us').append('<div class="error"> ' + value + '</div>');
                        $('.error').css('top', (108 + j*60) + 'px');
                        $('.error').fadeIn('slow');
                        submit_ok = false;
                        //return false;
                    }
                    j++;
                });               
                if(submit_ok) {
                    alert('Submitted Successfully');
                    $('.contact-us').append('<p style="display: none;">Thanks for contacting us! We will get back to you very soon.</p>');
                    $('.contact-us input, .contact-us textarea, .contact-us select, .contact-us button').remove();
                    $('.contact-us p').fadeIn('slow');
                    setTimeout(redirectTo,3000);
                }
            },
        });
    });

});
function redirectTo()
{window.location.href = "https://www.google.co.in/"}

If you respond on the server with a correct http status code for success / error you can use the ajax functions success and error callbacks to show/hide what you want.

$.ajax(
  success: function(resp) {
  },
  error: function(err) {
  }
)
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.