如何在重力表单单选按钮字段中添加onclick动作 [英] How to add onclick action to Gravity Forms Radio Button Field
本文介绍了如何在重力表单单选按钮字段中添加onclick动作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试获取重力形式按钮字段，即当用户选择一个选项时，它将转到下一页，而无需用户单击下一步.我在这里进行了快速搜索，发现以下代码:
$(function(){
jQuery('#input_1_26 input:radio').change(function() {
jQuery('#gform_next_button_1_4').trigger('click');
});
});
没有提及此代码应放在Wordpress中的位置，有人做过类似的事情吗?
例如5页表格
第1页: 单选按钮选项1 单选按钮选项2 单选按钮选项3
单击其中任何一个，转到第2页.
谢谢.
解决方案
jQuery示例可触发GravityForms上的下一个/上一个按钮
// 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/a82d1f3fcfaca171ae1f14b74c65f2
应该可以工作，但是不能在我的表单上工作
<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("#gform_target_page_number_5").val("2"); jQuery("#gform_5").trigger("submit",[true]); " onkeypress="if( event.keyCode == 13 ){ jQuery("#gform_target_page_number_5").val("2"); jQuery("#gform_5").trigger("submit",[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["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; jQuery("#gform_5").trigger("submit",[true]); }"> <input type="submit" id="gform_submit_button_5" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; jQuery("#gform_5").trigger("submit",[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
i'm trying to get Gravity Forms Button Field, that when the user selects an option, it goes to the next page without the user having to click next. I had done a quick search on here and found the following code:
$(function(){
jQuery('#input_1_26 input:radio').change(function() {
jQuery('#gform_next_button_1_4').trigger('click');
});
});
There was no mention of where this code should be placed within Wordpress, has anyone done something similar?
Example would be, 5 page form
Page 1: Radio Button Option 1 Radio Button Option 2 Radio Button Option 3
When any of these are clicked, goes to page 2.
Thanks in advance.
解决方案
jQuery example to trigger next/previous buttons on GravityForms
// 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
is suppose to work, but is not working on my form
<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("#gform_target_page_number_5").val("2"); jQuery("#gform_5").trigger("submit",[true]); " onkeypress="if( event.keyCode == 13 ){ jQuery("#gform_target_page_number_5").val("2"); jQuery("#gform_5").trigger("submit",[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["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; jQuery("#gform_5").trigger("submit",[true]); }"> <input type="submit" id="gform_submit_button_5" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_5"]){return false;} window["gf_submitting_5"]=true; jQuery("#gform_5").trigger("submit",[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
这篇关于如何在重力表单单选按钮字段中添加onclick动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
