nasty
nasty

Reputation: 7087

Disable jQuery effect on page refresh

Overview

I have div#lead_form that SlideDown in 5 seconds after page loads. And in that div, I have a submit button. Everytime someone clicks submit, the form within #lead_form will validate the input fields and refresh the page.

Issue

Everytime the form validates, it refreshes the web page and the div#lead_form SlideDown takes 5 seconds to slide in. What I want to do is, have a true false variable and check if the submit button has been clicked, if true, disable the div#lead_form SlideDown effect?

My HTML

<div id="lead_form">
<div id="button"><a href="#"></a></div>
</div>

My jQuery

$(document).ready(function() {
 $("#lead_form").hide(0).delay(4000).slideDown(5000);
});

Findings

This is not exactly what I'm after, but similar?

Upvotes: 1

Views: 492

Answers (2)

dag
dag

Reputation: 130

As there is a page reload you can not solve this using javascript only. you have to somehow persist the state (if the form was submitted) and check that state after the page is reloaded. you can do this either via a cookie or the local storage (local storage will only work in most recent browsers)

Upvotes: 0

veblock
veblock

Reputation: 1924

In your server side code check if the request is coming with your form submitted, and write the result as a javascript var in a given section on your page

if( isset($_POST['yourFORMFIELD']) )
{
     echo "var postBack = true;";
}

then change your jQuery ready to

$(document).ready(function() {
    if(!postBack) {
        $("#lead_form").hide(0).delay(4000).slideDown(5000);
    }
});

Upvotes: 2

Related Questions