CODEWITHSUNDEEP
javascriptjqueryforms
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Ajax form after submit collapse div and change image from div

So, I have a form with a background image (envelope). After submit I want to stay on the same page and collapse part of the div that contains the form and show only a image with thank you bla bla. How to do this smooth collapse and replacement? If anyone has some ideas or links, I would be grateful. 

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#form1").submit(function(){
            $("#formplic").html("<img src='images/thanks.png'/>");
        });
    }); 
</script> 

<div id="formplic"><img src="images/form.png"/></div>

<form id="form1" action="send.php" onSubmit="return chkForm(this)" name="form1" method="post" >
    <textarea name="message" cols="4" rows="4"  id="message" value=""></textarea>
    <input type="text"  id="name" name="name" value="" />
    <input type="text"  id="email" name="email" value="" />    
    <input type="submit" value="" id="submit" />
</form>

Upvotes: 0

Views: 970

Answers (1)

adeneo
adeneo

Reputation: 318302

How about some fading stuff ?

$(document).ready(function() { 
    $("#form1").submit(function(){
        $("#formplic").fadeOut(1000, function() {
             $(this).html("<img src='images/thanks.png'/>").fadeIn(1000);
        });
    });
});

or sliding stuff ?

$(document).ready(function() { 
    $("#form1").submit(function(){
        $("#formplic").slideUp(1000, function() {
             $(this).html("<img src='images/thanks.png'/>").slideDown(1000);
        });
    });
});

This sort of thing should be pretty straight forward with a little searching !

Upvotes: 2

Related Questions