javascript - AJAX call print success message then replace with clear form

Question

I have an ajax call that prints out a message successfully.

I want to print out the success message on top of the form and then hide that message and make a new clear form visible.

I have tried:

• resetting and showing the form after the success message with the reset() and show() functions but the div from the message remains on screen.
• calling fadeOut() on the message but the div background remains on screen

I believe the problem is that the message div replaces the form and there is no way to call back the form?

Here is what I have:

$(document).ready(function(){

    $("#form-id" ).on( "submit", function(e) {
 
        var dataString = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "/handlers/form-handler.php",
            data: dataString,
            success: function () {
                $("#form-id").html("<div id='message'></div>");
                $("#message").append("<img src='images/checkmark.png'>").hide().fadeIn(1000, function () {$("message").append("<p>Thank You!</p>").fadeOut(2000);});
                $("#form-id")[0].reset(); 
                $("#form-id").show();
            },
        });
    e.preventDefault();
    });
});
</script>

question from:https://stackoverflow.com/questions/65845357/ajax-call-print-success-message-then-replace-with-clear-form

Answer 1

Replying to my own post in case someone else is in the same position.

What I wanted was:

• a reset on my form
• a fade in message over my reset form
• a fade out of the message
• the newly reset form

The steps I followed:

• placed my div with the success message within my form
• gave my message div a higher z-index from my form
• gave my message div a position:absolute
• gave my form a position: relative
• gave my message div a display:none

Result:

• upon submitting successfully the message div fades in and out of the form and a fresh new form is revealed.

My new success function and message:

success: function () {
  $("#form-id")[0].reset();
  $('#message').hide().fadeIn(1000, function(){ $("#message"); 
  }).fadeOut(2000);
}

In my form file:

<form id="form-id" action="">
  <div id="message">Thank you for contacting us!</div>
</form>

My style sheet:

#message{
  display: none;
  z-index: 900 !important;
  position: absolute;
}

#form-id{
  position:relative;
}