So fügen Sie eine Onclick-Aktion zum Optionsfeldfeld von Gravity Forms hinzu

Question 1

Ich versuche, das Schaltflächenfeld für Gravity Forms zu erhalten, das, wenn der Benutzer eine Option auswählt, zur nächsten Seite geht, ohne dass der Benutzer auf Weiter klicken muss. Ich hatte hier schnell gesucht und folgenden Code gefunden:

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

Es wurde nicht erwähnt, wo dieser Code in WordPress platziert werden sollte, hat jemand etwas Ähnliches gemacht?

Beispiel wäre ein 5-seitiges Formular

Seite 1: Optionsfeld Option 1 Optionsfeld Option 2 Optionsfeld Option 3

Wenn eines davon angeklickt wird, geht es zu Seite 2.

Vielen Dank im Voraus.

Question 2

jQuery-Beispiel zum Auslösen der nächsten/zurück-Schaltflächen auf 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

soll funktionieren, funktioniert aber nicht auf meinem Formular

<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

Question 3

Verwenden Sie ein Onchnage-Ereignis für das Auswahlfeld.

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

für jQuery: Entfernen Sie das onchange-Ereignis aus <select> Schild

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();
    })
})

Oder Sie können diesen einfachen Weg verwenden

<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>