Save all Predictions with tabs

By default a submit button will only submit the values within the form it is part of. And because my shortcode for the prediction form will create a form per shortcode, you will have to find some way to combine the values of the other forms together with the one you are submitting before the actual submit. Sounds like a piece of jQuery that you will have to create.

Another option, is to use the filter footballpool_shortcode_html_fp-predictionform to remove the form tags from the output of the shortcode. And then to enclose the shortcodes/tabs in one form.

Haven’t tried any of this myself, so not sure if there could be conflicts with other parts of the code.

Only briefly tested. But looks like it works ??

/**
 * jQuery extension for the Football Pool plugin
 *
 * The script combines the input values of all prediction forms on a page and submits all the values. With the fp-predictionform
 * shortcode you can put multiple forms on a page (and maybe separate them on tabs). This script enables users to submit all these
 * forms with either one of the submit buttons.
 *
 * (c) 2018 Antoine Hurkmans
 */
 
jQuery( document ).ready( function() {
	// add submit handler to all football pool prediction forms
	jQuery( 'form[id^=predictionform-]' ).submit( function( e ) {
		// store the form that was submitted
		var submitted_form = jQuery( this );
		// get all other forms to attach the inputs to the submitted form
		jQuery( 'form[id^=predictionform-]' ).not( submitted_form ).each( function() {
			var this_form = jQuery( this );
			// get all the match inputs from the form and attach as hidden input to the submitted form
			jQuery( 'input[name^=_home_], input[name^=_away_]', this_form ).each( function() {
				var input = jQuery( this ).clone();
				input.attr( 'type', 'hidden' ).appendTo( submitted_form );
			} );
		} );
		// set form id to first form so save action is always triggered on first shortcode
		var first_form = jQuery( 'form[id^=predictionform-]' ).first();
		var first_form_id = jQuery( 'input[name=_fp_form_id]', first_form ).val();
		jQuery( 'input[name=_fp_form_id]', submitted_form ).val( first_form_id );
		// proceed with the submit event
		return;
		// e.preventDefault();
	} );
} );

Forgot the joker, so small update to the script ??

/**
 * jQuery extension for the Football Pool plugin
 *
 * The script combines the input values of all prediction forms on a page and submits all the values. With the fp-predictionform
 * shortcode you can put multiple forms on a page (and maybe separate them on tabs). This script enables users to submit all these
 * forms with either one of the submit buttons.
 *
 * (c) 2018 Antoine Hurkmans
 */
 
jQuery( document ).ready( function() {
	// add submit handler to all football pool prediction forms
	jQuery( 'form[id^=predictionform-]' ).submit( function( e ) {
		// store the form that was submitted
		var submitted_form = jQuery( this );
		// get all other forms to attach the inputs to the submitted form
		jQuery( 'form[id^=predictionform-]' ).not( submitted_form ).each( function() {
			var this_form = jQuery( this );
			// get all the match inputs from the form and attach as hidden input to the submitted form
			jQuery( 'input[name^=_home_], input[name^=_away_]', this_form ).each( function() {
				var input = jQuery( this ).clone();
				input.attr( 'type', 'hidden' ).appendTo( submitted_form );
			} );
		} );
		// set form id to first form so save action is always triggered on first shortcode
		var first_form = jQuery( 'form[id^=predictionform-]' ).first();
		var first_form_id = jQuery( 'input[name=_fp_form_id]', first_form ).val();
		jQuery( 'input[name=_fp_form_id]', submitted_form ).val( first_form_id );
		// get the joker value (if set)
		var joker = jQuery( 'span.fp-joker' );
		if ( joker ) {
			var id = joker.first().attr( 'id' );
			var joker_value = id.substring( id.indexOf( '_' ) + 1 );
			joker_value = joker_value.substring( 0, joker_value.indexOf( '_' ) );
			jQuery( 'input[name=_joker]', submitted_form ).val( joker_value );
		}
		// proceed with the submit event
		return;
		// e.preventDefault();
	} );
} );

Hi Antonie! it works perfect thank you so much for helping me and others!!
The only issue I have is the questions tab… i have tabs for matches (first round, round of 16, round of 8…etc) and a tab with 5 five questions at the same page… ??

Questions can also be added to the script, but this is a bit more complicated because there are different question types. If it is only text inputs, then changing this line

jQuery( 'input[name^=_home_], input[name^=_away_]', this_form ).each( function() {

to this

jQuery( 'input[name^=_bonus_], input[name^=_home_], input[name^=_away_]', this_form ).each( function() {

should do the trick.

But if you also use radios, checkboxes or dropdowns, then I think it will become more complicated to transfer the selected values between forms.

Super!!!! Those are only text inputs so it should work… Just one question. Should I add this line to the code you created before or just replace it?

It is a replacement for the line.

It worked! Thank you!