单击提交重力表单时显示加载动画

时间:2012-09-30 19:35:23

标签: php jquery forms wordpress loading-animation

我正在使用重力表格将我的带头提交给第三方问题是当我点击提交时需要5秒钟才能得到回复并发布潜在客户,而这种情况正在发生我想要显示加载或搜索动画给用户。

我正在使用重力形式,我不知道在哪里以及如何添加此功能。

有人可以帮我解决这个问题,我没有使用ajax。

1 个答案:

答案 0 :(得分:2)

当您在PHP短代码中将AJAX设为true时,最新更新应该有一个默认加载图像。

当AJAX属性为真时

<?php 
    echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
?>

这样做......

单击提交按钮时,不要再提交重复提交。请记住,Gravity Form将处理验证。这将设置按钮的样式,更改其中的文本并禁用按钮单击。默认情况下,加载图片将通过Gravity Forms显示。

<script type="text/javascript" language="JavaScript">
$(document).ready(function(){


    $('#gform_1 input.gform_button').live('click', function(){

        submitContactForm( $(this) );

    });

});

    function submitContactForm( _this ){

        _this.die('click');
        _this.css('opacity', '0.5');
        _this.val('Sending...');

        _this.attr('disabled', 'disabled');// using this will stop the form from submitting
        $('#gform_1').submit();// this will make sure that it submits

        //console.log('calibrating...');        
    }

</script>

在jquery中尝试使用它来覆盖图像src,当它在#34; submitContactForm&#34;内部时可见。功能

if ( _this.closest('.gform_footer').find('img.gform_ajax_spinner').is(':visible') ){
    _this.closest('.gform_footer').find('img.gform_ajax_spinner').attr('src','DIRECTORY OF YOUR CUSTOM SPINNER IMAGE');
}

因此,您不必记得在更新Gravity Form插件时随时覆盖该图像。