Grow your CSS skills. Land your dream job.

Form plugin and hiding and showing stuff ?

  • # September 13, 2009 at 6:37 pm

    I have a form and this is the code i`m using to make it work

    Code:
    $(document).ready(function() {

    var options = {

    target: ‘#response’,

    clearForm: true,

    beforeSubmit: showRequest,

    success: showResponse

    };

    $(‘#contactForm’).ajaxForm(options);
    $(‘#response’).fadeIn(1500);
    return false;
    });

    function showRequest(formData, jqForm, options) {

    var queryString = $.param(formData);

    return true;

    }

    function showResponse(responseText, statusText) {

    }

    my problem is i want the reponse message to disappear after for ex. 2 sec how can i add this to the code i tried to add

    Code:
    $(‘#contactForm’).ajaxForm(options);
    $(‘#response’).fadeIn(1500);
    $(‘#response’).fadeOut(‘slow’);
    return false;
    });

    but it didn`t worked although there was no errors in Firebug ? so how can i achieve this ?

    Rob
    # September 14, 2009 at 6:14 am

    do you have a link to the live code? :D

    # September 14, 2009 at 8:55 am

    Unfortunately i can`t :(

    but it`s like this

    Code:

    when i click the submit button i want the <fieldset> to fadeout and the <ul> to fade in with the thanks you message , then after X seconds they both revert to there normal state Fieldset visible and ul display none.

    Now what is happening that when i click the submit button the ul appears with the thanks you message and still there and the fieldset is always visible. all of this i want it to happened when a successful submit occurs not on an empty fields for example .

    # September 15, 2009 at 1:22 pm

    Well, you can try this out

    Code:
    $(‘#response-message”).animate({opacity: 1.0}, 2000).fadeOut(500,function(){
    /* What ever you want to perform after it disappears */
    });

    You can do this just after where ever you are displaying your response message.. try it out and let me know ;)

    # September 15, 2009 at 4:50 pm

    thanks but it didn`t work

    # September 16, 2009 at 12:11 am

    it still didn’t work? That’s weird.. I used the above code for a client to display a landing page which disappears after 3 seconds and then the main site appears.. May be you can paste the javascript part of the code where you are using it?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".