如何将 onclick 操作添加到重力表单单选按钮字段

Posted

技术标签:

【中文标题】如何将 onclick 操作添加到重力表单单选按钮字段【英文标题】:How to add onclick action to Gravity Forms Radio Button Field 【发布时间】:2018-10-16 14:57:25 【问题描述】:

我正在尝试获取重力表单按钮字段,当用户选择一个选项时,它会转到下一页,而无需用户单击下一步。我在这里做了一个快速搜索,发现以下代码:

$(function()
    jQuery('#input_1_26 input:radio').change(function() 
        jQuery('#gform_next_button_1_4').trigger('click');
    );
);

没有提到这段代码应该放在 Wordpress 中的什么位置,有没有人做过类似的事情?

例如,5 页表单

第 1 页: 单选按钮选项 1 单选按钮选项 2 单选按钮选项 3

当其中任何一个被点击时,转到第 2 页。

提前致谢。

【问题讨论】:

【参考方案1】:

在 GravityForms 上触发下一个/上一个按钮的 jQuery 示例

// This is the initial GravityForms binding, it will be lost upon a page change with next/previous
// Thus we make a bind on gform_page_loaded event also
 if( jQuery('.custom-form').length > 0 ) 
	jQuery('.gfield_radio input[type=radio]').bind("click", function() 
		//console.log('Clicked: ' + jQuery( this ).closest('.gform_page').find('.gform_page_footer .gform_next_button.button') );
		jQuery(this).closest('.gform_page').find('.gform_page_footer .gform_next_button.button').click();
	);


jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page)
      // code to be trigger when next/previous page is loaded
      if( jQuery('.custom-form').length > 0 ) 
		jQuery('.gfield_radio input[type=radio]').bind("click", function() 
			//console.log('Clicked: ' + jQuery( this ).closest('.gform_page').find('.gform_page_footer .gform_next_button.button') );
			jQuery(this).closest('.gform_page').find('.gform_page_footer .gform_next_button.button').click();
		);
	
  );

https://gist.github.com/yanknudtskov/a82d1f3fcfaca171ae1f14b74c65f2de

假设可以工作,但不适用于我的表单

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_5"><a id="gf_5" class="gform_anchor"></a><form method="post" enctype="multipart/form-data" id="gform_5" action="/test/#gf_5">
        <div id="gf_progressbar_wrapper_5" class="gf_progressbar_wrapper">
            <h3 class="gf_progressbar_title">Step 1 of 2
        </h3>
            <div class="gf_progressbar">
                <div class="gf_progressbar_percentage percentbar_blue percentbar_50" style="width:50%;"><span>50%</span></div>
            </div></div>
                        <div class="gform_body"><div id="gform_page_5_1" class="gform_page">
                                    <div class="gform_page_fields"><ul id="gform_fields_5" class="gform_fields top_label form_sublabel_below description_below"><li id="field_5_1" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label">Untitled</label><div class="ginput_container ginput_container_radio"><ul class="gfield_radio" id="input_5_1"><li class="gchoice_5_1_0"><input name="input_1" type="radio" value="First Choice" id="choice_5_1_0"><label for="choice_5_1_0" id="label_5_1_0">First Choice</label></li><li class="gchoice_5_1_1"><input name="input_1" type="radio" value="Second Choice" id="choice_5_1_1"><label for="choice_5_1_1" id="label_5_1_1">Second Choice</label></li><li class="gchoice_5_1_2"><input name="input_1" type="radio" value="Third Choice" id="choice_5_1_2"><label for="choice_5_1_2" id="label_5_1_2">Third Choice</label></li></ul></div></li></ul>
                    </div>
                    <div class="gform_page_footer">
                         <input type="button" id="gform_next_button_5_2" class="gform_next_button button" value="Next" onclick="jQuery(&quot;#gform_target_page_number_5&quot;).val(&quot;2&quot;);  jQuery(&quot;#gform_5&quot;).trigger(&quot;submit&quot;,[true]); " onkeypress="if( event.keyCode == 13 ) jQuery(&quot;#gform_target_page_number_5&quot;).val(&quot;2&quot;);  jQuery(&quot;#gform_5&quot;).trigger(&quot;submit&quot;,[true]);  "> 
                    </div>
                </div>
                <div id="gform_page_5_2" class="gform_page" style="display:none;">
                    <div class="gform_page_fields">
                        <ul id="gform_fields_5_2" class="gform_fields top_label form_sublabel_below description_below"><li id="field_5_3" class="gfield field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label">Untitled</label><div class="ginput_container ginput_container_radio"><ul class="gfield_radio" id="input_5_3"><li class="gchoice_5_3_0"><input name="input_3" type="radio" value="First Choice" id="choice_5_3_0"><label for="choice_5_3_0" id="label_5_3_0">First Choice</label></li><li class="gchoice_5_3_1"><input name="input_3" type="radio" value="Second Choice" id="choice_5_3_1"><label for="choice_5_3_1" id="label_5_3_1">Second Choice</label></li><li class="gchoice_5_3_2"><input name="input_3" type="radio" value="Third Choice" id="choice_5_3_2"><label for="choice_5_3_2" id="label_5_3_2">Third Choice</label></li></ul></div></li>
                            </ul></div>
        <div class="gform_page_footer top_label"><input type="submit" id="gform_previous_button_5" class="gform_previous_button button" value="Previous" onclick="if(window[&quot;gf_submitting_5&quot;])return false;  window[&quot;gf_submitting_5&quot;]=true;  " onkeypress="if( event.keyCode == 13 ) if(window[&quot;gf_submitting_5&quot;])return false; window[&quot;gf_submitting_5&quot;]=true;  jQuery(&quot;#gform_5&quot;).trigger(&quot;submit&quot;,[true]); "> <input type="submit" id="gform_submit_button_5" class="gform_button button" value="Submit" onclick="if(window[&quot;gf_submitting_5&quot;])return false;  window[&quot;gf_submitting_5&quot;]=true;  " onkeypress="if( event.keyCode == 13 ) if(window[&quot;gf_submitting_5&quot;])return false; window[&quot;gf_submitting_5&quot;]=true;  jQuery(&quot;#gform_5&quot;).trigger(&quot;submit&quot;,[true]); "> 
            <input type="hidden" class="gform_hidden" name="is_submit_5" value="1">
            <input type="hidden" class="gform_hidden" name="gform_submit" value="5">
            
            <input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
            <input type="hidden" class="gform_hidden" name="state_5" value="WyJbXSIsIjUwOTJlODY2NjY4N2FhMzg3OThkODZhNDZmOThlNGM3Il0=">
            <input type="hidden" class="gform_hidden" name="gform_target_page_number_5" id="gform_target_page_number_5" value="2">
            <input type="hidden" class="gform_hidden" name="gform_source_page_number_5" id="gform_source_page_number_5" value="1">
            <input type="hidden" name="gform_field_values" value="">
            
        </div>
                        </div></div>
                        </form>
                        </div>

https://www.mylife.getitdone.live/test/ https://www.mylife.getitdone.live/wp-content/themes/custom-community-child/custom.js?ver=4.9.7

【讨论】:

我使用了您的代码并从两个部分中删除了初始的“if”此类语句。然后它会产生魅力。【参考方案2】:

为选择框使用 onchnage 事件。

<script type="text/javascript">
    window.onload = function()
        location.href=document.getElementById("selectbox").value;
           
</script>

对于 jQuery:从 &lt;select&gt; 标签中移除 onchange 事件

jQuery(function () 
    // remove the below comment in case you need chnage on document ready
    // location.href=jQuery("#selectbox").val(); 
    jQuery("#selectbox").change(function () 
        location.href = jQuery(this).val();
    )
)

或者你可以用这个简单的方法

<select onchange="location = this.value;">
                <option value="/finished">Finished</option>
                <option value="/break">Break</option>
                <option value="/issue">Issues</option>
                <option value="/downtime">Downtime</option>
</select>

【讨论】:

感谢您的快速回答,我使用了这个:jQuery(function() jQuery(document).on('change', '#input_1_2 input:radio', function() // 也这是一个很好的衡量标准 jQuery(document).find('#gform_next_button_1_1').click(); ); 很高兴您解决了您的问题,如果有用,请将我的回答标记为有用。

以上是关于如何将 onclick 操作添加到重力表单单选按钮字段的主要内容,如果未能解决你的问题,请参考以下文章

jQuery选择表单单选按钮

Django 自定义表单单选按钮

表单单选按钮美化

DW里面在表格里加表单,单选按钮的问题

将表单单选值发送到 Java servlet,返回 null

使用 javascript 在单选按钮列表上调用 onclick