|
@@ -1,147 +0,0 @@
|
|
-import { sendLead } from "./api.module";
|
|
|
|
-import toast from './toast.module';
|
|
|
|
-import popup from './popup.module';
|
|
|
|
-
|
|
|
|
-let config: any = null;
|
|
|
|
-
|
|
|
|
-export function parsingForms(configInit: any) {
|
|
|
|
- config = configInit;
|
|
|
|
- getAllForms();
|
|
|
|
-}
|
|
|
|
-type FieldType = 'text' | 'password' | 'email' | 'number' | 'checkbox' | 'radio' | 'date' | 'file' | 'submit';
|
|
|
|
-
|
|
|
|
-type Field = {
|
|
|
|
- name: string;
|
|
|
|
- type: FieldType;
|
|
|
|
- value: string | boolean | File | null;
|
|
|
|
- required: boolean;
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
-type FormInfo = {
|
|
|
|
- form: HTMLFormElement;
|
|
|
|
- fields: Field[];
|
|
|
|
-};
|
|
|
|
-
|
|
|
|
-function handleSubmit(event: Event, form: HTMLFormElement, fields: Field[]) {
|
|
|
|
- event.preventDefault(); // Prevent the form from actually submitting
|
|
|
|
-
|
|
|
|
- // Custom processing here, e.g., send data via AJAX
|
|
|
|
- console.log(`Form submitted: ${form.id}`);
|
|
|
|
- console.log('Fields:', fields);
|
|
|
|
-
|
|
|
|
- const makeData: any = {};
|
|
|
|
-
|
|
|
|
- for(const field of fields) {
|
|
|
|
- makeData[field.name] = field.value;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- sendLead(makeData)
|
|
|
|
- .then(() => {
|
|
|
|
- popup.show(config?.formSuccessPopupText)
|
|
|
|
-
|
|
|
|
- setTimeout(() => {
|
|
|
|
- clearForm(form);
|
|
|
|
- popup.hide();
|
|
|
|
- }, 3000);
|
|
|
|
- })
|
|
|
|
- .catch((err) => {
|
|
|
|
- toast.error(err);
|
|
|
|
- })
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-function clearForm(form: HTMLFormElement): void {
|
|
|
|
- const elements = form.elements;
|
|
|
|
-
|
|
|
|
- for (let i = 0; i < elements.length; i++) {
|
|
|
|
- const element = elements[i] as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
|
|
- const elementType = element.type.toLowerCase();
|
|
|
|
-
|
|
|
|
- switch (elementType) {
|
|
|
|
- case 'text':
|
|
|
|
- case 'password':
|
|
|
|
- case 'email':
|
|
|
|
- case 'tel':
|
|
|
|
- case 'url':
|
|
|
|
- case 'search':
|
|
|
|
- case 'number':
|
|
|
|
- case 'date':
|
|
|
|
- case 'datetime-local':
|
|
|
|
- case 'time':
|
|
|
|
- case 'month':
|
|
|
|
- case 'week':
|
|
|
|
- case 'color':
|
|
|
|
- case 'range':
|
|
|
|
- (element as HTMLInputElement).value = '';
|
|
|
|
- break;
|
|
|
|
- case 'checkbox':
|
|
|
|
- case 'radio':
|
|
|
|
- (element as HTMLInputElement).checked = false;
|
|
|
|
- break;
|
|
|
|
- case 'select-one':
|
|
|
|
- case 'select-multiple':
|
|
|
|
- (element as HTMLSelectElement).selectedIndex = -1;
|
|
|
|
- break;
|
|
|
|
- case 'textarea':
|
|
|
|
- (element as HTMLTextAreaElement).value = '';
|
|
|
|
- break;
|
|
|
|
- default:
|
|
|
|
- break;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-function getAllForms(): FormInfo[] {
|
|
|
|
- const forms = Array.from(document.forms);
|
|
|
|
- const formInfos: FormInfo[] = [];
|
|
|
|
- // const requiredFields = ['name', 'phone', 'email'];
|
|
|
|
- const requiredFields = ['name', 'phone'];
|
|
|
|
-
|
|
|
|
- forms.forEach((form) => {
|
|
|
|
- const fields: Field[] = [];
|
|
|
|
- Array.from(form.elements).forEach((element) => {
|
|
|
|
- if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
|
|
|
|
- let value: string | boolean | File | null = element.value;
|
|
|
|
- const fieldType = element.type as FieldType;
|
|
|
|
- const isRequired = requiredFields.includes(element.name);
|
|
|
|
- if (fieldType === 'checkbox' || fieldType === 'radio') {
|
|
|
|
- value = (element as HTMLInputElement).checked;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- if(fieldType === 'submit') return;
|
|
|
|
- // else if (fieldType === 'file') {
|
|
|
|
- // value = (element as HTMLInputElement).files ? (element as HTMLInputElement).files[0] : null;
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
- const field: Field = {
|
|
|
|
- name: element.name,
|
|
|
|
- type: fieldType,
|
|
|
|
- value: value,
|
|
|
|
- required: isRequired,
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
- fields.push(field);
|
|
|
|
-
|
|
|
|
- // Add reactive update by input event
|
|
|
|
- element.addEventListener('input', () => {
|
|
|
|
- if (fieldType === 'checkbox' || fieldType === 'radio') {
|
|
|
|
- field.value = (element as HTMLInputElement).checked;
|
|
|
|
- } else {
|
|
|
|
- field.value = element.value;
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- if (isRequired) {
|
|
|
|
- element.required = true;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- formInfos.push({ form, fields });
|
|
|
|
-
|
|
|
|
- // Attach the handleSubmit function to the form's submit event
|
|
|
|
- form.addEventListener('submit', (event) => handleSubmit(event, form, fields));
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- return formInfos;
|
|
|
|
-}
|
|
|