Hello Plus / 1.7.3

Hello Plus v1.7.3

hello-plus / modules / forms / assets / js / frontend / handlers / form-sender.js

form-sender.js in Hello Plus 1.7.3, at modules/forms/assets/js/frontend/handlers/form-sender.js

167 lines 5.6 KB

Raw Download Zip

1	export default elementorModules.frontend.handlers.Base.extend( {
2	getDefaultSettings() {
3	return {
4	selectors: {
5	form: '.ehp-form',
6	submitButton: '[type="submit"]',
7	},
8	action: 'helloplus_forms_lite_send_form',
9	ajaxUrl: elementorFrontendConfig.urls.ajaxurl,
10	nonce: ehpFormsData.nonce,
11	};
12	},
13
14	getDefaultElements() {
15	const selectors = this.getSettings( 'selectors' );
16
17	return {
18	$form: this.$element[ 0 ].querySelector( selectors.form ),
19	$submitButton: this.$element[ 0 ].querySelector( selectors.submitButton ),
20	};
21	},
22
23	bindEvents() {
24	this.elements.$form.addEventListener( 'submit', this.handleSubmit.bind( this ) );
25	},
26
27	beforeSend() {
28	const form = this.elements.$form;
29
30	form.style.opacity = '0.45';
31	form.classList.add( 'elementor-form-waiting' );
32
33	const messageElement = form.querySelector( '.elementor-message' );
34	if ( messageElement ) {
35	messageElement.remove();
36	}
37
38	const errorElement = form.querySelector( '.elementor-error' );
39	if ( errorElement ) {
40	errorElement.classList.remove( 'elementor-error' );
41	}
42
43	const fieldGroups = form.querySelectorAll( 'div.elementor-field-group' );
44	fieldGroups.forEach( ( group ) => {
45	group.classList.remove( 'error' );
46	const helpInline = group.querySelector( 'span.elementor-form-help-inline' );
47	if ( helpInline ) {
48	helpInline.remove();
49	}
50
51	const inputElements = group.querySelectorAll( ':input' );
52	inputElements.forEach( ( input ) => input.setAttribute( 'aria-invalid', 'false' ) );
53	} );
54
55	this.elements.$submitButton.setAttribute( 'disabled', 'disabled' );
56	const spinner = document.createElement( 'span' );
57	spinner.classList.add( 'elementor-button-text', 'elementor-form-spinner' );
58	spinner.innerHTML = '<i class="fa fa-spinner fa-spin"></i> ';
59	this.elements.$submitButton.prepend( spinner );
60	},
61
62	getFormData() {
63	const formData = new FormData( this.elements.$form );
64	formData.append( 'action', this.getSettings( 'action' ) );
65	formData.append( 'nonce', this.getSettings( 'nonce' ) );
66	formData.append( 'referrer', location.toString() );
67
68	return formData;
69	},
70
71	onSuccess( response ) {
72	const form = this.elements.$form;
73
74	this.elements.$submitButton.removeAttribute( 'disabled' );
75	const spinner = this.elements.$submitButton.querySelector( '.elementor-form-spinner' );
76	if ( spinner ) {
77	spinner.remove();
78	}
79
80	form.style.opacity = '1';
81	form.classList.remove( 'elementor-form-waiting' );
82
83	if ( ! response.success ) {
84	if ( response.data.errors ) {
85	Object.entries( response.data.errors ).forEach( ( [ key, title ] ) => {
86	const field = form.querySelector( `#form-field-${ key }` );
87	if ( field ) {
88	field.parentElement.classList.add( 'elementor-error' );
89	const errorMessage = document.createElement( 'span' );
90	errorMessage.classList.add( 'elementor-message', 'elementor-message-danger', 'elementor-help-inline', 'elementor-form-help-inline' );
91	errorMessage.setAttribute( 'role', 'alert' );
92	errorMessage.textContent = title;
93	field.parentElement.appendChild( errorMessage );
94	const input = field.querySelector( 'input' );
95	if ( input ) {
96	input.setAttribute( 'aria-invalid', 'true' );
97	}
98	}
99	} );
100	form.dispatchEvent( new Event( 'error' ) );
101	}
102
103	const errorMessage = document.createElement( 'div' );
104	errorMessage.classList.add( 'elementor-message', 'elementor-message-danger' );
105	errorMessage.setAttribute( 'role', 'alert' );
106	errorMessage.textContent = response.data.message;
107	form.appendChild( errorMessage );
108	} else {
109	form.dispatchEvent( new CustomEvent( 'submit_success', { detail: response.data } ) );
110	form.dispatchEvent( new CustomEvent( 'form_destruct', { detail: response.data } ) );
111
112	form.reset();
113
114	const successClass = [ 'elementor-message', 'elementor-message-success' ];
115	if ( elementorFrontendConfig.experimentalFeatures.e_font_icon_svg ) {
116	successClass.push( 'elementor-message-svg' );
117	}
118
119	if ( response.data.message && response.data.message !== '' ) {
120	const successMessage = document.createElement( 'div' );
121	successMessage.classList.add( ...successClass );
122	successMessage.setAttribute( 'role', 'alert' );
123	successMessage.textContent = response.data.message;
124	form.appendChild( successMessage );
125	}
126	}
127	},
128
129	onError( xhr, desc ) {
130	const form = this.elements.$form;
131
132	const dangerMessage = document.createElement( 'div' );
133	dangerMessage.classList.add( 'elementor-message', 'elementor-message-danger' );
134	dangerMessage.setAttribute( 'role', 'alert' );
135	dangerMessage.textContent = desc;
136	form.appendChild( dangerMessage );
137
138	this.elements.$submitButton.innerHTML = this.elements.$submitButton.textContent;
139	this.elements.$submitButton.removeAttribute( 'disabled' );
140
141	form.style.opacity = '1';
142	form.classList.remove( 'elementor-form-waiting' );
143
144	form.dispatchEvent( new Event( 'error' ) );
145	},
146
147	handleSubmit( event ) {
148	event.preventDefault();
149
150	const form = this.elements.$form;
151
152	if ( form.classList.contains( 'elementor-form-waiting' ) ) {
153	return false;
154	}
155
156	this.beforeSend();
157
158	fetch( this.getSettings( 'ajaxUrl' ), {
159	method: 'POST',
160	body: this.getFormData(),
161	} )
162	.then( ( response ) => response.json() )
163	.then( ( data ) => this.onSuccess( data ) )
164	.catch( ( error ) => this.onError( null, error ) );
165	},
166	} );
167