FormIt in a JQuery Slide-In

64 Posts

CBorah Reply #1, 13 years, 8 months ago

I’m trying to use FormIt in a JQuery Slide-In based on this tutorial, http://designshack.co.uk/articles/javascript/creating-a-slide-in-jquery-contact-form. Everything is working well except when their is a field left empty. The page refreshes and my slide-in returns back to its closed state, thus hiding the form fields and the error messages that should be displayed. I don’t know JS or php so if their is a way to fix this using either of those I won’t be able to do it without some help.

The only difference between my form and one in the tutorial above is that I’m using FormIt to validate and send the email. Otherwise the JS and CSS are the same.

Clayton Borah
Designer and Brand Facilitator

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 8 months ago

I had the same issue with a slide-in eForm in Evo. I had to add a function to the javascript to determine if the HTML element that eForm uses for its error messages was empty; if it wasn’t empty then extend the slider. I also added a Javascript alert with the various messages at the same time, mostly just because I could cool

although it makes a nice Thank You message without extending the slider again.

    if($("div.errors").text() != '') {  $("#contactArea").animate({height: "330px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}); 
    }

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

64 Posts

CBorah Reply #3, 13 years, 8 months ago

Thanks for your response. I think I still need a little more clarification for my situation. As I said earlier I don’t know JS so I would prefer to find a solution by adding something to what I already have. The JS you provided may work but I don’t know where to put it and what values to change to fit my needs. Here is JS I’m using.

$(document).ready(function(){

                $("#contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
                
            });
            
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }

All of the error messages/validation are being displayed by FormIt and not JS.
This is how I think (not sure) it should work...

The visitor fills in the form and submits
if - an error is returned by FormIt the slide-drawer-thingy stays out and displays the error messages
else-the form is processed by FormIt, success message is displayed and then the form slides out.

Thanks again.

Clayton Borah
Designer and Brand Facilitator

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 13 years, 8 months ago

You need to check what the classname or ID of the container for the error messages is. Then in the javascript you need to trigger the $("#contactForm").slideDown("slow") function if that container is not empty. I’m sorry, but it has to be in the javascript.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

64 Posts

CBorah Reply #5, 13 years, 8 months ago

Thanks a bunch. It took me a while but I figured it out.

Clayton Borah
Designer and Brand Facilitator

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 13 years, 8 months ago

I detest working with Javascript, it usually takes me hours to get one simple function to work. That includes the simple line of code I posted above. Hours of research, more hours of trial-and-error. But it does make some really nice effects.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org