Clear Booking Field Selections

Adds a “Clear” button that resets all selections tied to a Booking field — the linked Service field (in manual mode), any linked Resource fields, and the selected Booking time field slot.

Instructions

  1. Install this snippet with our free Custom JavaScript plugin. https://gravitywiz.com/gravity-forms-code-chest/

  2. Add an HTML field to your form with a button that has a data-booking-field-id attribute set to your Booking field’s ID.

    Example: <button type="button" data-booking-field-id="4">Clear</button>

Code

Filename: gpb-clear-booking-field-selections.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/**
 * Gravity Perks // Bookings // Clear Booking Field Selections
 * https://gravitywiz.com/documentation/gravity-forms-bookings/
 *
 * Adds a "Clear" button that resets all selections tied to a Booking field —
 * the linked Service field (in manual mode), any linked Resource fields, and
 * the selected Booking time field slot.
 *
 * Instructions
 *
 * 1. Install this snippet with our free Custom JavaScript plugin.
 *    https://gravitywiz.com/gravity-forms-code-chest/
 *
 * 2. Add an HTML field to your form with a button that has a
 *    `data-booking-field-id` attribute set to your Booking field's ID.
 *
 *    Example: `<button type="button" data-booking-field-id="4">Clear</button>`
 */
( function () {
	var $form = jQuery( '#gform_' + GFFORMID );
	if ( ! $form.length ) {
		return;
	}

	function findBookingInstance( bookingFieldId ) {
		var instances = window.gpBookings || {};
		for ( var key in instances ) {
			if ( instances[ key ].formId === GFFORMID && instances[ key ].bookingFieldId === parseInt( bookingFieldId, 10 ) ) {
				return instances[ key ];
			}
		}
		return null;
	}

	function clearChoiceField( fieldId ) {
		var $radios = $form.find( 'input[type="radio"][name="input_' + fieldId + '"]' );
		if ( $radios.length ) {
			var $checked = $radios.filter( ':checked' );
			$radios.prop( 'checked', false );
			( $checked.length ? $checked : $radios.first() ).trigger( 'change' );
			return;
		}
		jQuery( '#input_' + GFFORMID + '_' + fieldId ).val( '' ).trigger( 'change' );
	}

	$form.off( 'click.gpbClear' ).on( 'click.gpbClear', 'button[data-booking-field-id]', function ( event ) {
		event.preventDefault();

		var instance = findBookingInstance( this.getAttribute( 'data-booking-field-id' ) );
		if ( ! instance ) {
			return;
		}

		( instance.resourceFieldIds || [] ).forEach( clearChoiceField );

		if ( instance.serviceFieldId ) {
			clearChoiceField( instance.serviceFieldId );
		}

		var state = instance.store.getState();
		state.setSelectedRange( undefined );
		state.setShowCalendar( true );
	} );
} )();

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.