Trigger jquery when 'Gravity Forms' input button is clicked

Question

I've updated the question because it may because of gravity forms which is stopping a simple function from working. The reason I say this is because I've tried so many options (listed below) to trigger a jQuery function, and none of them work when they should.

I have a simple function below which 100% works...

var $contactButton  = $(".contact-slide a"),
    $contactSlide   = $("#horizon-slide");

function () {
    $contactSlide.stop().css("top","0");
};

Simple as it gets, but I'm trying to trigger this when my submit button gets clicked from a gravity from.

This is the wordpress gravity forms input markup...

<input type="submit" id="gform_submit_button_1" class="button gform_button" value="Send" tabindex="7"></input>

These are all the scripts below that I've tried, but none of them run the function...

Script One

$("input#gform_submit_button_1").on('click', function () {
    $contactSlide.stop().css("top","0");
});

Script Two

$("input#gform_submit_button_1").click(function() {
    $contactSlide.stop().css("top","0");
});

Script Three

$("input#gform_submit_button_1").focus(function () {
    $contactSlide.stop().css("top","0");
});

Script Four

$("form#gform_1").submit(function(event) {
$contactSlide.stop().css("top","0");
});

I've also tried...

return false; 

and

return true;

on all of the scripts above, but none of them return the function. If I set the scripts to return false then the form does not submit, but if I set to return true, then form submits but the function does not run.

Why is this happening, I thought this would be basic stuff?

Thanks for any help.

Solution

Are you trying to have something run upon form submission? If you're using the AJAX submission method of the form you can use the gform_confirmation_loaded event to run some JavaScript after the form is submitted.

$(document).on('gform_confirmation_loaded', function(e, form_id){
   if(form_id == 2) {
       $contactSlide.stop().css("top","0");
   }
});

It will run on every form submission so to specify the form, test the form_id parameter passed to the event handler.

Comments

[Joshc]

Hi Andres thanks for you answer, I tried your method but does not run the script. I tried both return false and true. Return false stops the form from submitting, but return true does run whats inside the function

[Joshc]

It does not run the function, hmmm weird. I've been triple checking all my code but the script runs fine, but I think its something to do with ether the varible not working, but it should for sure, or because i'm using gravity forms, maybe thats interfering. Do you know a way I can do it via adding a onclick on the input? Thanks

[Joshc]

I've tried it with out the variable and still not running the function.

[Chris Rae]

There's an error in the code, it should be <form name="forma" method="post" action="/">