alphons / WebFormBuilder
Code Commits Branches Issues Collaborators Settings

pseudo element Form is used for onsubmit form and onchange elements

alphons <alphons@heijden.com> 15 Sep 2025, 15:14
f8ae68e9f362c91e91a2a211919c6e5b0afd1c9d
7 files changed
  • WebFormBuilder/Controllers/FormConfigController.cs
  • WebFormBuilder/Examples/formConfigData.json
  • WebFormBuilder/Examples/password.json
  • WebFormBuilder/Examples/text.json
  • WebFormBuilder/Models/HtmlInputType.cs
  • WebFormBuilder/wwwroot/Default.js
  • WebFormBuilder/wwwroot/WebForm.js
diff --git a/WebFormBuilder/Controllers/FormConfigController.cs b/WebFormBuilder/Controllers/FormConfigController.cs
index 3a4784d..5d5af5a 100644
--- a/WebFormBuilder/Controllers/FormConfigController.cs
+++ b/WebFormBuilder/Controllers/FormConfigController.cs
@@ -17,10 +17,20 @@ public class FormConfigController : ControllerBase
if (name == "navigation")
{
- var listNav = new List<FormField>();
+ List<FormField> listNav = [];
+
+ listNav.Add(new FormField
+ {
+ Type = HtmlInputType.Form,
+ Name = "formNavigation",
+ Properties = ["action=/api/SubmitData", "method=post", "change=/api/SubmitValue"]
+ });
+
foreach (HtmlInputType type in Enum.GetValues(typeof(HtmlInputType)))
{
+ if (type == HtmlInputType.Unknown || type == HtmlInputType.Form)
+ continue;
listNav.Add(new FormField
{
Type = HtmlInputType.Button,
diff --git a/WebFormBuilder/Examples/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
index dc079ff..1f53513 100644
--- a/WebFormBuilder/Examples/formConfigData.json
+++ b/WebFormBuilder/Examples/formConfigData.json
@@ -1,4 +1,9 @@
[
+ {
+ "Type": "Form",
+ "Name": "FormName1",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
{
"Type": "Text",
"Name": "username",
diff --git a/WebFormBuilder/Examples/password.json b/WebFormBuilder/Examples/password.json
index 5a08d70..99f00b2 100644
--- a/WebFormBuilder/Examples/password.json
+++ b/WebFormBuilder/Examples/password.json
@@ -1,4 +1,9 @@
[
+ {
+ "Type": "Form",
+ "Name": "FormName2",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
{
"Type": "password",
"Name": "password1"
diff --git a/WebFormBuilder/Examples/text.json b/WebFormBuilder/Examples/text.json
index db28474..bcdd7d2 100644
--- a/WebFormBuilder/Examples/text.json
+++ b/WebFormBuilder/Examples/text.json
@@ -1,4 +1,9 @@
[
+ {
+ "Type": "Form",
+ "Name": "FormName3",
+ "Properties": [ "action=/api/SubmitData", "method=post", "change=/api/SubmitValue" ]
+ },
{
"Type": "text",
"Name": "text1"
diff --git a/WebFormBuilder/Models/HtmlInputType.cs b/WebFormBuilder/Models/HtmlInputType.cs
index 6b5f21b..480ff4c 100644
--- a/WebFormBuilder/Models/HtmlInputType.cs
+++ b/WebFormBuilder/Models/HtmlInputType.cs
@@ -5,6 +5,8 @@ namespace WebFormBuilder.Models;
[JsonConverter(typeof(JsonStringEnumConverter))]
public enum HtmlInputType
{
+ Unknown,
+ Form, // pseudo element
Text,
Email,
Password,
diff --git a/WebFormBuilder/wwwroot/Default.js b/WebFormBuilder/wwwroot/Default.js
index eebb906..859e575 100644
--- a/WebFormBuilder/wwwroot/Default.js
+++ b/WebFormBuilder/wwwroot/Default.js
@@ -25,7 +25,8 @@ async function submitFormData(event)
try
{
- const response = await fetch('/api/SubmitData',
+ const form = event.target;
+ const response = await fetch(form.action,
{
method: 'POST',
body: new FormData(event.target)
@@ -53,14 +54,14 @@ async function handleInputEvent(event)
const type = inputElement.type;
const name = inputElement.name;
const val = inputElement.value;
- const formname = inputElement.closest('form') && inputElement.closest('form').id || 'unknown';
+ const form = inputElement.closest('form');
var state = "";
if (type === "checkbox")
state = inputElement.checked ? 'checked' : 'unchecked';
try
{
- const response = await fetch('/api/SubmitValue',
+ const response = await fetch(form.change,
{
method: 'POST',
headers: {
@@ -68,7 +69,7 @@ async function handleInputEvent(event)
},
body: JSON.stringify(
{
- formname: formname,
+ formname: form.id,
type: type,
name: name,
val: val,
@@ -104,7 +105,7 @@ async function handleNavigationEvent(event)
document.getElementById("output").innerHTML = JSON.stringify(formConfig, null, 2);
- const form = generateForm("formcontainer", "formDynamic", formConfig);
+ const form = generateForm("formcontainer", formConfig);
form.addEventListener('input', handleInputEvent);
@@ -113,12 +114,12 @@ async function handleNavigationEvent(event)
window.scrollTo({ top: 0, behavior: 'smooth' });
}
-
+// shows navigation buttons of all possible input types
document.addEventListener('DOMContentLoaded', async () =>
{
const formConfig = await fetchFormConfig('navigation');
- const form = generateForm("navcontainer", "formNavigation", formConfig);
+ const form = generateForm("navcontainer", formConfig);
form.addEventListener('click', handleNavigationEvent);
diff --git a/WebFormBuilder/wwwroot/WebForm.js b/WebFormBuilder/wwwroot/WebForm.js
index 2df55b3..d2b631c 100644
--- a/WebFormBuilder/wwwroot/WebForm.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -27,7 +27,7 @@
const type = inputElement.type;
const name = inputElement.name;
const val = inputElement.value;
- const formname = inputElement.closest('form') && inputElement.closest('form').id || 'unknown';
+ const form = inputElement.closest('form');
var state = "";
if (type === "checkbox")
state = inputElement.checked ? 'checked' : 'unchecked';
@@ -36,7 +36,7 @@
{
return await netproxyasync(ValueUrl,
{
- formname: formname,
+ formname: form.id,
type: type,
name: name,
val: val,
@@ -48,15 +48,32 @@
console.error("Error submitting form data:", error);
}
}
- window.generateForm = function generateForm(formContainerId, name, formConfig, submitFormUrl, submitValueUrl)
+ window.generateForm = function generateForm(formContainerId, formConfig, submitFormUrl, submitValueUrl)
{
const formContainer = document.getElementById(formContainerId)
+ const formElement = formConfig.find(element => element.Type === 'Form');
+
const form = document.createElement("form");
- form.id = name;
- FormUrl = submitFormUrl;
- ValueUrl = submitValueUrl;
+ if (formElement)
+ {
+ formElement.Properties.forEach(element =>
+ {
+ const [key, value] = element.split("=");
+ if (key && value)
+ form[key] = value;
+ });
+ form.id = formElement.Name;
+ FormUrl = form.action;
+ ValueUrl = form.change;
+ }
+ else
+ {
+ form.id = "dynamicForm";
+ FormUrl = submitFormUrl;
+ ValueUrl = submitValueUrl;
+ }
var index = 0;
formConfig.forEach((field) =>
@@ -108,6 +125,8 @@
function generateField(field, wrapper)
{
+ if (field.Type === "form")
+ return;
if (field.Type === "hidden")
{
wrapper.style.display = 'none';