feat: Add Form reset

Travelopia · Oct 24, 2024 · d8d6b33 · d8d6b33
1 parent 64920df
commit d8d6b33
Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/form/index.html b/src/form/index.html
@@ -32,7 +32,7 @@
 </head>
 <body>
 	<main>
-		<tp-form prevent-submit="yes">
+		<tp-form prevent-submit="yes" submit-reset="yes">
 			<form action="#">
 				<tp-form-field no-empty-spaces="yes" required="yes">
 					<label>Field 1</label>

diff --git a/src/form/tp-form.ts b/src/form/tp-form.ts
@@ -58,6 +58,20 @@ export class TPFormElement extends HTMLElement {
 		// If form is valid then dispatch a custom 'submit-validation-success' event.
 		if ( formValid ) {
 			this.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );
+
+			// If reset form is enabled then reset the form.
+			if ( 'yes' === this.getAttribute( 'submit-reset' ) && this.form ) {
+				// Reset form validation.
+				this.resetValidation();
+
+				// Reset the form.
+				this.form.reset();
+
+				// Reset submit button if present.
+				if ( submit ) {
+					submit.removeAttribute( 'submitting' );
+				}
+			}
 		}
 	}