netproxydependend for submitting values and form
a90ceb9fa9b55daff680ecc07d9baafbca98ade0
1 files changed
WebFormBuilder/wwwroot/WebForm.js
diff --git a/WebFormBuilder/wwwroot/WebForm.js b/WebFormBuilder/wwwroot/WebForm.js
index ef8713c..2df55b3 100644
--- a/WebFormBuilder/wwwroot/WebForm.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -1,346 +1,399 @@
-"use strict";
-
-function generateForm(formContainerId, name, formConfig)
+(function ()
{
- const formContainer = document.getElementById(formContainerId)
+ 'use strict';
- const form = document.createElement("form");
- form.id = name;
+ var FormUrl, ValueUrl;
- var index = 0;
- formConfig.forEach((field) =>
+ async function submitFormData(event)
{
- field.Name ??= `text${index}`, index++;
- field.Type = (field.Type ?? "text").toLowerCase();
- field.Label ??= toPascalCase(field.Name);
- const wrapper = document.createElement("div");
- generateField(field, wrapper);
- form.appendChild(wrapper);
- });
-
- formContainer.replaceChildren();
- formContainer.appendChild(form);
-
- return form;
-}
-function createTooltip(text)
-{
- const tooltipWrapper = document.createElement("span");
- tooltipWrapper.className = "tooltip-wrapper";
+ event.preventDefault();
- const tooltipIcon = document.createElement("span");
- tooltipIcon.className = "tooltip-icon";
- tooltipIcon.textContent = "?";
+ try
+ {
+ const submitButton = event.target.querySelector('button[type="submit"], input[type="submit"]');
+ const data = new FormData(event.target);
+ data.append(submitButton.name ? submitButton.name : 'submit', submitButton.value);
+ return await netproxyasync(FormUrl, data);
+ }
+ catch (error)
+ {
+ console.error("Error submitting form data:", error);
+ }
+ }
- const tooltipText = document.createElement("span");
- tooltipText.className = "tooltip-text";
- tooltipText.textContent = text;
+ async function handleInputEvent(event)
+ {
+ const inputElement = event.target;
+ const type = inputElement.type;
+ const name = inputElement.name;
+ const val = inputElement.value;
+ const formname = inputElement.closest('form') && inputElement.closest('form').id || 'unknown';
+ var state = "";
+ if (type === "checkbox")
+ state = inputElement.checked ? 'checked' : 'unchecked';
+
+ try
+ {
+ return await netproxyasync(ValueUrl,
+ {
+ formname: formname,
+ type: type,
+ name: name,
+ val: val,
+ state: state
+ });
+ }
+ catch (error)
+ {
+ console.error("Error submitting form data:", error);
+ }
+ }
+ window.generateForm = function generateForm(formContainerId, name, formConfig, submitFormUrl, submitValueUrl)
+ {
+ const formContainer = document.getElementById(formContainerId)
- tooltipWrapper.appendChild(tooltipIcon);
- tooltipWrapper.appendChild(tooltipText);
+ const form = document.createElement("form");
+ form.id = name;
- return tooltipWrapper;
-}
+ FormUrl = submitFormUrl;
+ ValueUrl = submitValueUrl;
-function toPascalCase(str)
-{
- return str
- .replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '')
- .toUpperCase());
-}
+ var index = 0;
+ formConfig.forEach((field) =>
+ {
+ field.Name ??= `text${index}`, index++;
+ field.Type = (field.Type ?? "text").toLowerCase();
+ field.Label ??= toPascalCase(field.Name);
+ const wrapper = document.createElement("div");
+ generateField(field, wrapper);
+ form.appendChild(wrapper);
+ });
-function generateField(field, wrapper)
-{
- if (field.Type === "hidden")
+ formContainer.replaceChildren();
+ formContainer.appendChild(form);
+
+ if (ValueUrl)
+ form.addEventListener('input', handleInputEvent);
+
+ if (FormUrl)
+ form.addEventListener("submit", submitFormData);
+
+ return form;
+ }
+ function createTooltip(text)
{
- wrapper.style.display = 'none';
+ const tooltipWrapper = document.createElement("span");
+ tooltipWrapper.className = "tooltip-wrapper";
+
+ const tooltipIcon = document.createElement("span");
+ tooltipIcon.className = "tooltip-icon";
+ tooltipIcon.textContent = "?";
+
+ const tooltipText = document.createElement("span");
+ tooltipText.className = "tooltip-text";
+ tooltipText.textContent = text;
+
+ tooltipWrapper.appendChild(tooltipIcon);
+ tooltipWrapper.appendChild(tooltipText);
+
+ return tooltipWrapper;
}
- else
+
+ function toPascalCase(str)
{
- if (field.Label)
- {
- const label = document.createElement("label");
- if (field.Type == "checkbox" || field.Type == "radio")
- label.htmlFor = field.Name + "_0";
- else
- label.htmlFor = field.Name;
- label.textContent = field.Label;
- wrapper.appendChild(label);
+ return str
+ .replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '')
+ .toUpperCase());
+ }
- if (field.Tooltip)
+ function generateField(field, wrapper)
+ {
+ if (field.Type === "hidden")
+ {
+ wrapper.style.display = 'none';
+ }
+ else
+ {
+ if (field.Label)
{
- const tooltip = createTooltip(field.Tooltip);
- label.appendChild(tooltip);
+ const label = document.createElement("label");
+ if (field.Type == "checkbox" || field.Type == "radio")
+ label.htmlFor = field.Name + "_0";
+ else
+ label.htmlFor = field.Name;
+ label.textContent = field.Label;
+ wrapper.appendChild(label);
+
+ if (field.Tooltip)
+ {
+ const tooltip = createTooltip(field.Tooltip);
+ label.appendChild(tooltip);
+ }
}
}
- }
- var element;
- switch (field.Type)
- {
- case "radio":
- case "checkbox":
- element = createOptionField(field);
- break;
- case "select":
- element = createSelectField(field);
- break;
- case "combobox":
- element = createComboboxField(field);
- break;
- case "euro":
- element = createEuroField(field);
- break;
- case "hidden":
- case "submit":
- case "reset":
- case "link":
- element = createButton(field);
- break;
- default:
- element = createInputField(field);
- break;
- }
+ var element;
+ switch (field.Type)
+ {
+ case "radio":
+ case "checkbox":
+ element = createOptionField(field);
+ break;
+ case "select":
+ element = createSelectField(field);
+ break;
+ case "combobox":
+ element = createComboboxField(field);
+ break;
+ case "euro":
+ element = createEuroField(field);
+ break;
+ case "submit":
+ case "reset":
+ case "link":
+ element = createButton(field);
+ break;
+ default:
+ element = createInputField(field);
+ break;
+ }
- AddProperties(field, element);
+ AddProperties(field, element);
- wrapper.appendChild(element);
-}
+ wrapper.appendChild(element);
+ }
-function splitOnce(str, delimiter)
-{
- const index = str.indexOf(delimiter);
- return index === -1 ? [str] : [str.substring(0, index), str.substring(index + delimiter.length)];
-}
+ function splitOnce(str, delimiter)
+ {
+ const index = str.indexOf(delimiter);
+ return index === -1 ? [str] : [str.substring(0, index), str.substring(index + delimiter.length)];
+ }
-function AddProperties(field, element)
-{
- var el = element;
- if (el.tagName === "DIV")
- el = el.querySelector("input");
+ function AddProperties(field, element)
+ {
+ var el = element;
+ if (el.tagName === "DIV")
+ el = el.querySelector("input");
- if (!el)
- return;
+ if (!el)
+ return;
- if (field.Properties)
- {
- for (const key in field.Properties)
+ if (field.Properties)
{
- if (field.Properties.hasOwnProperty(key))
+ for (const key in field.Properties)
{
- const [property, value] = splitOnce(field.Properties[key], '=');
+ if (field.Properties.hasOwnProperty(key))
+ {
+ const [property, value] = splitOnce(field.Properties[key], '=');
- value && (el[property] = value);
+ value && (el[property] = value);
+ }
}
}
}
-}
-
-function createOptionField(field)
-{
- const element = document.createElement("div");
- element.classList.add(field.Type === "radio" ? "radio-group" : "checkbox-group");
- field.Options.forEach((option, index) =>
+ function createOptionField(field)
{
- const optionWrapper = document.createElement("div");
- const inputId = `${field.Name}_${index}`;
-
- const optelement = document.createElement("input");
- optelement.type = field.Type;
- optelement.name = field.Name;
- optelement.value = option;
- optelement.id = inputId;
+ const element = document.createElement("div");
+ element.classList.add(field.Type === "radio" ? "radio-group" : "checkbox-group");
- if (field.Type === "radio" && field.Value === option)
+ field.Options.forEach((option, index) =>
{
- optelement.checked = true;
- }
- else if (field.Type === "checkbox" && field.Value && field.Value.split(",").includes(option))
- {
- optelement.checked = true;
- }
+ const optionWrapper = document.createElement("div");
+ const inputId = `${field.Name}_${index}`;
- const label = document.createElement("label");
- label.htmlFor = inputId;
- label.textContent = option;
+ const optelement = document.createElement("input");
+ optelement.type = field.Type;
+ optelement.name = field.Name;
+ optelement.value = option;
+ optelement.id = inputId;
- optionWrapper.appendChild(optelement);
- optionWrapper.appendChild(label);
- element.appendChild(optionWrapper);
- });
- return element;
-}
+ if (field.Type === "radio" && field.Value === option)
+ {
+ optelement.checked = true;
+ }
+ else if (field.Type === "checkbox" && field.Value && field.Value.split(",").includes(option))
+ {
+ optelement.checked = true;
+ }
-function createSelectField(field)
-{
- const element = document.createElement("select");
- element.name = field.Name;
- element.id = field.Name;
+ const label = document.createElement("label");
+ label.htmlFor = inputId;
+ label.textContent = option;
- field.Options.forEach((option) =>
+ optionWrapper.appendChild(optelement);
+ optionWrapper.appendChild(label);
+ element.appendChild(optionWrapper);
+ });
+ return element;
+ }
+
+ function createSelectField(field)
{
- const optionElement = document.createElement("option");
- optionElement.value = option;
- optionElement.textContent = option;
+ const element = document.createElement("select");
+ element.name = field.Name;
+ element.id = field.Name;
- if (field.Value === option)
+ field.Options.forEach((option) =>
{
- optionElement.selected = true;
- }
-
- element.appendChild(optionElement);
- });
- return element;
-}
-
-function createEuroField(field)
-{
- const eurowrapper = document.createElement("div");
- eurowrapper.classList.add("euro-wrapper");
+ const optionElement = document.createElement("option");
+ optionElement.value = option;
+ optionElement.textContent = option;
- const input = document.createElement("input");
- input.name = field.Name;
- input.id = field.Name;
- input.type = "number";
+ if (field.Value === option)
+ {
+ optionElement.selected = true;
+ }
- if (field.Placeholder)
- input.placeholder = field.Placeholder;
+ element.appendChild(optionElement);
+ });
+ return element;
+ }
- if (field.Value)
- input.value = field.Value;
+ function createEuroField(field)
+ {
+ const eurowrapper = document.createElement("div");
+ eurowrapper.classList.add("euro-wrapper");
- eurowrapper.appendChild(input);
+ const input = document.createElement("input");
+ input.name = field.Name;
+ input.id = field.Name;
+ input.type = "number";
- return eurowrapper;
-}
+ if (field.Placeholder)
+ input.placeholder = field.Placeholder;
+ if (field.Value)
+ input.value = field.Value;
+ eurowrapper.appendChild(input);
-function filterItems(query)
-{
- const comboboxList = document.getElementById("combobox-list");
- const items = comboboxList.dataset.items ? JSON.parse(comboboxList.dataset.items) : [];
- return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
-}
+ return eurowrapper;
+ }
-function renderList(filteredItems, fieldName)
-{
- const comboboxList = document.getElementById("combobox-list");
- comboboxList.innerHTML = '';
- if (filteredItems.length === 0)
+ function filterItems(query)
{
- comboboxList.style.display = 'none';
- return;
+ const comboboxList = document.getElementById("combobox-list");
+ const items = comboboxList.dataset.items ? JSON.parse(comboboxList.dataset.items) : [];
+ return items.filter(item => item.toLowerCase().includes(query.toLowerCase()));
}
- const comboboxInput = document.getElementById(fieldName);
- filteredItems.forEach(item =>
+ function renderList(filteredItems, fieldName)
{
- const listItem = document.createElement('div');
- listItem.textContent = item;
- listItem.className = 'combobox-list-item';
- listItem.addEventListener('click', () =>
+ const comboboxList = document.getElementById("combobox-list");
+ comboboxList.innerHTML = '';
+ if (filteredItems.length === 0)
{
comboboxList.style.display = 'none';
- comboboxInput.value = item;
- comboboxInput.dispatchEvent(new Event('input', { bubbles: true }));
- });
- comboboxList.appendChild(listItem);
- });
+ return;
+ }
- comboboxList.style.display = 'block';
-}
+ const comboboxInput = document.getElementById(fieldName);
+ filteredItems.forEach(item =>
+ {
+ const listItem = document.createElement('div');
+ listItem.textContent = item;
+ listItem.className = 'combobox-list-item';
+ listItem.addEventListener('click', () =>
+ {
+ comboboxList.style.display = 'none';
+ comboboxInput.value = item;
+ comboboxInput.dispatchEvent(new Event('input', { bubbles: true }));
+ });
+ comboboxList.appendChild(listItem);
+ });
-function createComboboxField(field)
-{
- const combobox = document.createElement("div");
- combobox.classList.add("combobox");
+ comboboxList.style.display = 'block';
+ }
- const comboboxInput = document.createElement("input");
- comboboxInput.name = field.Name;
- comboboxInput.id = field.Name;
- comboboxInput.setAttribute('autocomplete', 'off');
+ function createComboboxField(field)
+ {
+ const combobox = document.createElement("div");
+ combobox.classList.add("combobox");
- const comboboxList = document.createElement("div");
- comboboxList.id = "combobox-list";
- comboboxList.classList.add("combobox-list");
- comboboxList.dataset.items = JSON.stringify(field.Options);
+ const comboboxInput = document.createElement("input");
+ comboboxInput.name = field.Name;
+ comboboxInput.id = field.Name;
+ comboboxInput.setAttribute('autocomplete', 'off');
- combobox.appendChild(comboboxInput);
- combobox.appendChild(comboboxList);
+ const comboboxList = document.createElement("div");
+ comboboxList.id = "combobox-list";
+ comboboxList.classList.add("combobox-list");
+ comboboxList.dataset.items = JSON.stringify(field.Options);
- comboboxInput.addEventListener('input', () =>
- {
- const query = comboboxInput.value;
- const filteredItems = filterItems(query);
- renderList(filteredItems, field.Name);
- });
+ combobox.appendChild(comboboxInput);
+ combobox.appendChild(comboboxList);
- document.addEventListener('click', event =>
- {
- if (!event.target.closest('.combobox'))
+ comboboxInput.addEventListener('input', () =>
{
- comboboxList.style.display = 'none';
- }
- });
+ const query = comboboxInput.value;
+ const filteredItems = filterItems(query);
+ renderList(filteredItems, field.Name);
+ });
- return combobox;
-}
+ document.addEventListener('click', event =>
+ {
+ if (!event.target.closest('.combobox'))
+ {
+ comboboxList.style.display = 'none';
+ }
+ });
+ return combobox;
+ }
-function createInputField(field)
-{
- const element = document.createElement(field.Type === "textarea" ? "textarea" : "input");
- element.name = field.Name;
- element.id = field.Name;
- if (field.Type !== "textarea")
+ function createInputField(field)
{
- element.type = field.Type;
- }
+ const element = document.createElement(field.Type === "textarea" ? "textarea" : "input");
+ element.name = field.Name;
+ element.id = field.Name;
- if (field.Placeholder)
- {
- element.placeholder = field.Placeholder;
- }
+ if (field.Type !== "textarea")
+ {
+ element.type = field.Type;
+ }
- if (field.Value)
- {
- if (field.Type === "image")
- element.src = field.Value;
- else
- element.value = field.Value;
+ if (field.Placeholder)
+ {
+ element.placeholder = field.Placeholder;
+ }
+
+ if (field.Value)
+ {
+ if (field.Type === "image")
+ element.src = field.Value;
+ else
+ element.value = field.Value;
+ }
+ return element;
}
- return element;
-}
-function createButton(field)
-{
- const element = document.createElement(field.Type === "hidden" ? "input" : "button");
- element.type = field.Type;
- element.name = field.Name;
- element.id = field.Name;
- if (field.Value)
+ function createButton(field)
{
- if (field.Type === "hidden")
- element.value = field.Value;
- else
+ const element = document.createElement("button");
+ element.type = field.Type;
+ element.name = field.Name;
+ element.id = field.Name;
+ element.value = field.Value;
+ if (field.Value)
+ {
element.textContent = field.Value;
- }
- else
- {
- element.textContent = field.Label;
- }
- if (field.Type === "link")
- {
- element.addEventListener("click", (event) =>
+ }
+ else
{
- event.preventDefault();
- const url = field.Properties.find(str => str.startsWith("href="))?.split("=")[1]?.trim();
- if (url) window.location.href = url;
- });
+ element.textContent = field.Label;
+ }
+ if (field.Type === "link")
+ {
+ element.addEventListener("click", (event) =>
+ {
+ event.preventDefault();
+ const url = field.Properties.find(str => str.startsWith("href="))?.split("=")[1]?.trim();
+ if (url) window.location.href = url;
+ });
+ }
+ return element;
}
- return element;
-}
+})();