alphons / WebFormBuilder
Code Commits Branches Issues Collaborators Settings

Has a Link element

alphons <alphons@heijden.com> 3 Jan 2025, 16:01
b1fac262319c63dbf0cf5cdf9429eb809db3652c
6 files changed
  • WebFormBuilder/Controllers/SubmitValueController.cs
  • WebFormBuilder/Examples/formConfigData.json
  • WebFormBuilder/Models/HtmlInputType.cs
  • WebFormBuilder/wwwroot/Default.js
  • WebFormBuilder/wwwroot/WebForm.css
  • WebFormBuilder/wwwroot/WebForm.js
diff --git a/WebFormBuilder/Controllers/SubmitValueController.cs b/WebFormBuilder/Controllers/SubmitValueController.cs
index 372f849..857487f 100644
--- a/WebFormBuilder/Controllers/SubmitValueController.cs
+++ b/WebFormBuilder/Controllers/SubmitValueController.cs
@@ -10,6 +10,7 @@ public class SubmitValueController : ControllerBase
public class Input
{
+ public string? formname { get; set; }
public string? type { get; set; }
public string? name { get; set; }
public string? val { get; set; }
@@ -20,7 +21,7 @@ public class SubmitValueController : ControllerBase
//[Consumes("multipart/form-data")]
public IActionResult ChangeValue([FromBody] Input input)
{
- Debug.WriteLine($"name:{input.name} type:{input.type} val:{input.val} state:{input.state}");
+ Debug.WriteLine($"formname:{input.formname} name:{input.name} type:{input.type} val:{input.val} state:{input.state}");
return Ok(true);
}
diff --git a/WebFormBuilder/Examples/formConfigData.json b/WebFormBuilder/Examples/formConfigData.json
index 52bf3d1..8a7c36c 100644
--- a/WebFormBuilder/Examples/formConfigData.json
+++ b/WebFormBuilder/Examples/formConfigData.json
@@ -159,6 +159,14 @@
"Tooltip": "Pick your favorite color.",
"Value": "#ff0000"
},
+ {
+ "Type": "Link",
+ "Name": "Hyperlink",
+ "Label": "This is a Hyperlink",
+ "Tooltip": "Nagigate away",
+ "Properties": [ "href=https://www.dse.nl/" ],
+ "Value": "www.dse.nl"
+ },
{
"Type": "Image",
"Name": "submit_image",
diff --git a/WebFormBuilder/Models/HtmlInputType.cs b/WebFormBuilder/Models/HtmlInputType.cs
index 9373632..6b5f21b 100644
--- a/WebFormBuilder/Models/HtmlInputType.cs
+++ b/WebFormBuilder/Models/HtmlInputType.cs
@@ -11,6 +11,7 @@ public enum HtmlInputType
Combobox,
Tel,
Url,
+ Link,
Number,
Range,
Euro,
diff --git a/WebFormBuilder/wwwroot/Default.js b/WebFormBuilder/wwwroot/Default.js
index ae606b0..eebb906 100644
--- a/WebFormBuilder/wwwroot/Default.js
+++ b/WebFormBuilder/wwwroot/Default.js
@@ -53,6 +53,7 @@ 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';
var state = "";
if (type === "checkbox")
state = inputElement.checked ? 'checked' : 'unchecked';
@@ -67,6 +68,7 @@ async function handleInputEvent(event)
},
body: JSON.stringify(
{
+ formname: formname,
type: type,
name: name,
val: val,
diff --git a/WebFormBuilder/wwwroot/WebForm.css b/WebFormBuilder/wwwroot/WebForm.css
index a934eac..f05a33b 100644
--- a/WebFormBuilder/wwwroot/WebForm.css
+++ b/WebFormBuilder/wwwroot/WebForm.css
@@ -99,6 +99,7 @@ body
.form-container input[type="button"]:focus,
input[type="file"]:hover,
+ input[type="button"]:hover,
button:hover
{
background: #0056b3;
diff --git a/WebFormBuilder/wwwroot/WebForm.js b/WebFormBuilder/wwwroot/WebForm.js
index eb4fcfa..ef8713c 100644
--- a/WebFormBuilder/wwwroot/WebForm.js
+++ b/WebFormBuilder/wwwroot/WebForm.js
@@ -87,13 +87,14 @@ function generateField(field, wrapper)
case "combobox":
element = createComboboxField(field);
break;
+ case "euro":
+ element = createEuroField(field);
+ break;
case "hidden":
case "submit":
case "reset":
- element = createButtonOrHidden(field);
- break;
- case "euro":
- element = createEuroField(field);
+ case "link":
+ element = createButton(field);
break;
default:
element = createInputField(field);
@@ -314,7 +315,7 @@ function createInputField(field)
return element;
}
-function createButtonOrHidden(field)
+function createButton(field)
{
const element = document.createElement(field.Type === "hidden" ? "input" : "button");
element.type = field.Type;
@@ -331,6 +332,15 @@ function createButtonOrHidden(field)
{
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;
}