立即从脚本计算

时间:2014-05-20 07:50:47

标签: javascript jquery gravity-forms-plugin

我正在使用计算字段对Gravity Forms进行一些测试,如下所示:

NumberA {9} - NumberB {11} 

结果立即显示,无需任何额外操作。

但我不能将此脚本分配给HTML字段类型,行为是立即行为,就像在上面的例子中一样:

<script>
gform.addFilter ('gform_calculation_result', function (result, FormulaField, formId, calcObj) {
     if (formulaField.field_id == "2") {
         var num = jQuery ('# input_6_1') val ().; 
         result = Math.pow (num, 3); 
     } 
     return result; 
}); 
</ script>

我已经读过,因为有像Javascript keyup这样的事件,但是我无法使它工作,因为它不是一种主导的语言。

如何在第一个示例中获得即时结果?

更新1

我正在阅读有关如何进行回调的内容,我已经开始使用此代码:

function do_a( callback ){ 
  gform.addFilter( 'gform_calculation_result', 
    function(result, formulaField, formId, calcObj ){     
      if ( formulaField.field_id == "2" ){ 
        var num = jQuery('#input_6_1').val(); 
        result = Math.pow(num, 3); 
      } 
      return result; 
  }); 
}
function do_b(){   
  console.log( '<code>do_b</code>: now we can make sure <code>do_b</code>'+
 ' comes out after <code>do_a</code>' ); 
}   
do_a( function(){   do_b(); }); 

但结果是一样的。我无法立即获得计算结果。

更新2:

新尝试,但没有结果......

<script>
function f1( param1, callbackFunction ) {  
    alert( 'Started F1. \n\n Parameter: ' + param1);  
    callbackFunction ();  
}
f1 ( jQuery('#input_6_1').val(), function() {  
    alert( 'f1, execute.' );    
    gform.addFilter( 'gform_calculation_result', function(result, formulaField, formId, calcObj ){    
        if ( formulaField.field_id == "2" ){
            var num = jQuery('#input_6_1').val();
            result = Math.pow(num, 3);
        }
        f1 (result);
    });
});
</script>

更新3:

此代码来自html表单:

<body>
    <div id="preview_top">
        <div id="preview_hdr">
            <div><span class="actionlinks"><a href="javascript:window.close()" class="close_window">cerrar ventana</a></span>Previsualizar Formulario</div>
        </div>
        <div id="preview_note">Nota: Esta es una previsualización simple del formulario. Este formulario se puede ver de manera diferente cuando es agregado a una página del sitio con el estilo del mismo.</div>
    </div>
    <div id="preview_form_container">        
                <div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_6' ><form method='post' enctype='multipart/form-data'  id='gform_6'  action='/wp/?gf_page=preview&amp;id=6'>
                        <div class='gform_heading'>
                            <h3 class='gform_title'>Exponent form FUNCIONANDO!!!</h3>
                            <span class='gform_description'></span>
                        </div>
                        <div class='gform_body'>
                            <ul id='gform_fields_6' class='gform_fields top_label description_below'><li id='field_6_1' class='gfield' ><label class='gfield_label' for='input_6_1'>Number ----  1</label><div class='ginput_container'><input name='input_1' id='input_6_1' type='text'  value='' class='medium' tabindex='1'   /></div></li><li id='field_6_2' class='gfield' ><label class='gfield_label' for='input_6_2'>Number ----  2</label><div class='ginput_container'><input name='input_2' id='input_6_2' type='text'  value='' class='medium' tabindex='2'  readonly="readonly" /></div></li><li id='field_6_3' class='gfield      gfield_html gfield_html_formatted gfield_no_follows_desc' ><script>
gform.addFilter( 'gform_calculation_result', function(result, formulaField, formId, calcObj ){    

        var num = jQuery('#input_6_1').val();
        result = Math.pow(num, 3);          
 $("input_6_2").html("the result is "+num);
});
</script></li>
                            </ul></div>
        <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_6' class='button gform_button' value='Enviar' tabindex='3' onclick='if(window["gf_submitting_6"]){return false;}  window["gf_submitting_6"]=true; '/>
            <input type='hidden' class='gform_hidden' name='is_submit_6' value='1' />
            <input type='hidden' class='gform_hidden' name='gform_submit' value='6' />
            <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
            <input type='hidden' class='gform_hidden' name='state_6' value='WyJhOjA6e30iLCI3MTcyNDkwMWU1NWMxNWU4YmZiYTQ5MjY5M2U5ZjNhMiJd' />
            <input type='hidden' class='gform_hidden' name='gform_target_page_number_6' id='gform_target_page_number_6' value='0' />
            <input type='hidden' class='gform_hidden' name='gform_source_page_number_6' id='gform_source_page_number_6' value='1' />
            <input type='hidden' name='gform_field_values' value='' />

        </div>
                        </form>
                        </div><script type='text/javascript'> if(typeof gf_global == 'undefined') var gf_global = {"gf_currency_config":{"name":"D\u00f3lar Americano","symbol_left":"$","symbol_right":"","symbol_padding":"","thousand_separator":",","decimal_separator":".","decimals":2},"base_url":"http:\/\/localhost\/wp\/wp-content\/plugins\/gravityforms","number_formats":[],"spinnerUrl":"http:\/\/localhost\/wp\/wp-content\/plugins\/gravityforms\/images\/spinner.gif"};jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 6) {gf_global["number_formats"][6] = {"1":"decimal_dot","2":"decimal_dot","3":false};new GFCalc(6, [{"field_id":2,"formula":"{Number ----  2:2}","rounding":""}]);} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [6, 1]) } ); </script>        </div>
            </body>

如果您看到代码我有一个容器ID = input_6_2。我在建议的代码中使用了此ID:

 $("input_6_2").html("the result is "+num);

当我使用Javascript控制台时,我在此行中收到以下错误:“未捕获的TypeError:undefined不是函数。

2 个答案:

答案 0 :(得分:0)

您需要了解这些函数是异步的。我从未使用重力形式,但JavaScript原理是相同的

此外,您还有几个语法问题,并且JS区分大小写,因此请正确使用

gform.addFilter ('gform_calculation_result', 
  function (result, formulaField, formId, calcObj) { // is excuted AFTER the addFilter
    if (formulaField.field_id == "2") {
       var num = $('#input_6_1').val(); // not sure how you got your syntax
       result = Math.pow (num, 3); 
       $("#someResultContainer").html("the result is "+num);
    } 
   // return result; this is not useful here
 });  

<强>更新

我认为你需要在gform插件触发后执行过滤器

这样的东西
$(function () {
    if (typeof gf_global == 'undefined') var gf_global = {
        "gf_currency_config": {
            "name": "D\u00f3lar Americano",
            "symbol_left": "$",
            "symbol_right": "",
            "symbol_padding": "",
            "thousand_separator": ",",
            "decimal_separator": ".",
            "decimals": 2
        },
        "base_url": "http:\/\/localhost\/wp\/wp-content\/plugins\/gravityforms",
        "number_formats": [],
        "spinnerUrl": "http:\/\/localhost\/wp\/wp-content\/plugins\/gravityforms\/images\/spinner.gif"
    };
    $(document).bind('gform_post_render', function (event, formId, currentPage) {
        if (formId == 6) {
            gf_global["number_formats"][6] = {
                "1": "decimal_dot",
                "2": "decimal_dot",
                "3": false
            };
            new GFCalc(6, [{
                "field_id": 2,
                "formula": "{Number ----  2:2}",
                "rounding": ""
            }]);
        }
    });
    $(document).bind('gform_post_conditional_logic', function (event, formId, fields, isInit) {

      gform.addFilter('gform_calculation_result', function(result, formulaField, formId, calcObj) {
        var num = jQuery('#input_6_1').val();
        var result = Math.pow(num, 3);
          window.console&&console.log(result);
        $("input_6_2").html("the result is " + num);
      });


    });
    $(document).trigger('gform_post_render', [6, 1]);
})

答案 1 :(得分:0)

gform_calculation_result过滤器仅在表格中存在活动计算功能的数字或产品字段时运行。