CODEWITHSUNDEEP
jqueryhtmlformspostfade
technopeasant
technopeasant

Reputation: 7939

jQuery fade page out before posting form action

I've got to fade the page out before posting the form action. I'm not sure if this is even possible, so I don't know where to begin.

That said, I do know how to do it for links... javascript below. Thanks for your help!

HTML form I need to intercept the post method from

<form id="postitron" method="post" action="/postitron/answertron.php">

JavaScript I've used for anchor tags

var $linkLocation;

function redirectPage(){
    window.location = $linkLocation;
}

$('a.transition').click(function(event){
    event.preventDefault();
    $linkLocation = this.href;
    $('#page').animate({opacity:0},400, function(){
        redirectPage();
    });
});

UPDATE:

So many answers! Thank you!

I've implemented the gist of what was recommended across the board and am getting an infinite loop of animation.. what am I missing?

I've made a JSFiddle to demonstrate... it doesn't animate in an infinite loop... but it doesn't return a 404 either. Weird!?

HTML

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

UPDATE #2

@Ahren suggested that @Priyank Patel's use of the .one() method would prevent the animation from looping infinitely, which it did (yay!), but my console is now returning an error that's preventing the form submission:

Uncaught TypeError: Property 'submit' of object # is not a function

Here's the updated JavaSript

$('#postitron').one('submit', function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

Update #3

Further thought on it... The .one() method executes the handler once for the element.. is that preventing the same submit() method from being executed once the animation fades?

Update #4

jQuery animate in infinite loop

Upvotes: 2

Views: 2426

Answers (7)

mrtsherman
mrtsherman

Reputation: 39882

You can use basically the same code, but bind to the form submission instead. I believe jQuery is smart enough not to infinite loop this.

$(<submitbutton>).click(function(event){
    event.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('form').submit();
    });
});

Update - based on feedback from technopeasant, you can avoid the infinite loop by binding to click event of button instead of submit event.

Upvotes: 1

Anupam
Anupam

Reputation: 210

once check this code it may be helpful for you:

<html>
        <head>
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript">
                        $(document).ready(function(){
                            $("button").click(function(){
                                $("div").fadeOut(400,function(){
                                    alert(1)
                                    $("#form1").trigger("submit");
                                });
                            });
                        });
                </script>
        </head>
    <body>
    <div style="background:yellow;width:300px;height:300px">
        <form method="post" action="another.php" id="form1">
            <input type="text" value="hello this will hide">
                <button>Click to Fade</button>
        </form>
    </div>
    </body>
</html>

Upvotes: 0

Code Spy
Code Spy

Reputation: 9964

Simple !

<form id="target" action="destination.html">
  <input type="text" value="Hello there" />
  <input type="submit" value="Go" />
</form>

​
            $('#target').submit(function() {
                $('input').fadeOut('slow', function() {
                    alert('Redirecting now ......Were yor Seatbelts');
                    return false;
                });
            });?

Updated jQuery Code:

<form id="postitron" method="post" action="/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>


$('#postitron').submit(function() {
      $('input').fadeOut('slow', function() {
      alert('Redirecting now ......Were yor Seatbelts');
          //Will redirect to 404 in Jsfiddle
      return false;
  });
});

​ UPDATE2 :P http://jsfiddle.net/ipsjolly/ELKuL/5/

UPDATE : http://jsfiddle.net/ipsjolly/ELKuL/3/

Example: http://jsfiddle.net/ipsjolly/ELKuL/1/

Upvotes: 0

lu1s
lu1s

Reputation: 5801

Just call $("body").fadeOut(); before redirecting, but in your case it won't send any data to the form, just a regular redirect. Maybe you would like to send the data, then redirect.

Would be like this:

$("a.transition").bind("click",function(e){
    e.preventDefault();

    var url = $(this).attr("href");

    var data = { /* handle your data and construct this object */ };

    $.post(url,data,function(){
        $("body").fadeOut(400,function(){
            window.location = url;
        });
    });
});

Upvotes: 0

Emil M
Emil M

Reputation: 1123

You can use the same approach for forms:

  1. prevent event default form submission
  2. fade out the page
  3. submit the form with javascript after animation completion

Upvotes: 0

Priyank Patel
Priyank Patel

Reputation: 3535

$('#postitron').one('submit', function(event) 
{
    event.preventDefault();
    // fadeout page here...
    $('#postitron').submit();
});

Upvotes: 0

ahren
ahren

Reputation: 16959

Much the same as what you've already got.

$("#postitron").submit(function(e){
    e.preventDefault(); //stops the submission
    $("body").fadeOut(400, function(){
        handleFormSubmission(); 
    }); 
});

function handleFormSubmission(){
   // form submission code here.    
}

Upvotes: 0

Related Questions