Trigger jquery when 'Gravity Forms' input button is clicked

6
votes

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.

3
jqueryformswordpressinputonclick
return true; instead of false - asawyer
Your click function returns false. This prevents form submitting. - Emre Erkan
Tried this, and the form submits now but does not run the function - Joshc

3 Answers

6
votes

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.

0
votes

You can control it from the form submit if you have a form..

<script type="text/javascript" src="js/jquery1.6.1.js"></script>
<script type="text/javascript">
 $(document).ready(function () {
   $("#forma").submit(function(event) {
       //do what ever you need to here
        return false;
    });
});
</script>
<form name="1stform" method="post" action="/">
    <input type="text" name="misc" id="misc" />
    <input type="submit" name="submit" id="submit" value="submit 1st form"/>
</form>
0
votes
$contactInput.focus(function () {
    $contactSlide.stop().css("top","0");
    $('body,html').animate({
        scrollTop: 0
    }, 0);
    return true;
});

Give it a try :)