alphons / WebFormBuilder
Code Commits Branches Issues Collaborators Settings

submit values

alphons <alphons@heijden.com> 24 Dec 2024, 21:37
92d43c5f70905767e1a0cecbf89237603e9c7d3d
4 files changed
  • WebFormBuilder/Controllers/SubmitValueController.cs
  • WebFormBuilder/formConfigData.json
  • WebFormBuilder/wwwroot/Index.html
  • WebFormBuilder/wwwroot/script.js
diff --git a/WebFormBuilder/Controllers/SubmitValueController.cs b/WebFormBuilder/Controllers/SubmitValueController.cs
new file mode 100644
index 0000000..372f849
--- /dev/null
+++ b/WebFormBuilder/Controllers/SubmitValueController.cs
@@ -0,0 +1,28 @@
+using Microsoft.AspNetCore.Mvc;
+using System.Diagnostics;
+
+namespace WebFormBuilder.Controllers;
+
+[ApiController]
+[Route("api/[controller]")]
+public class SubmitValueController : ControllerBase
+{
+
+ public class Input
+ {
+ public string? type { get; set; }
+ public string? name { get; set; }
+ public string? val { get; set; }
+ public string? state { get; set; }
+ }
+
+ [HttpPost]
+ //[Consumes("multipart/form-data")]
+ public IActionResult ChangeValue([FromBody] Input input)
+ {
+ Debug.WriteLine($"name:{input.name} type:{input.type} val:{input.val} state:{input.state}");
+ return Ok(true);
+ }
+
+
+}
diff --git a/WebFormBuilder/formConfigData.json b/WebFormBuilder/formConfigData.json
index 214f2a0..8f6faf1 100644
--- a/WebFormBuilder/formConfigData.json
+++ b/WebFormBuilder/formConfigData.json
@@ -104,8 +104,8 @@
"Type": "Range",
"Name": "satisfaction",
"Label": "Satisfaction Level",
- "Tooltip": "Rate your satisfaction from 1 to 10.",
- "Properties": [ "min=1", "max=10", "step=1" ],
+ "Tooltip": "Rate your satisfaction from 0 to 9.",
+ "Properties": [ "min=0", "max=9", "step=1" ],
"Value": "5"
},
{
diff --git a/WebFormBuilder/wwwroot/Index.html b/WebFormBuilder/wwwroot/Index.html
index 39a6374..7b1f96a 100644
--- a/WebFormBuilder/wwwroot/Index.html
+++ b/WebFormBuilder/wwwroot/Index.html
@@ -7,9 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radio and Checkbox Styling</title>
<link rel="stylesheet" href="styles.css">
+ <script src="script.js" defer></script>
</head>
<body>
<div id="form1" class="form-container"></div>
- <script src="script.js" defer></script>
</body>
</html>
diff --git a/WebFormBuilder/wwwroot/script.js b/WebFormBuilder/wwwroot/script.js
index eb09ce5..9206fc2 100644
--- a/WebFormBuilder/wwwroot/script.js
+++ b/WebFormBuilder/wwwroot/script.js
@@ -70,10 +70,9 @@ function toPascalCase(str)
.replace(/(^\w|[\s-_]+\w)/g, match => match.replace(/[\s-_]/, '').toUpperCase());
}
-async function generateForm(formId)
+async function generateForm(formContainer)
{
const formConfig = await fetchFormConfig();
- const formContainer = document.getElementById(formId);
const form = document.createElement("form");
form.id = "dynamicForm";
@@ -256,6 +255,56 @@ function createButtonOrHidden(field)
return element;
}
+async function handleInputEvent(event)
+{
+ const inputElement = event.target;
+ const type = inputElement.type;
+ const name = inputElement.name;
+ const val = inputElement.value;
+ var state = "";
+ if (type === "checkbox")
+ state = inputElement.checked ? 'checked' : 'unchecked';
+
+ try
+ {
+ const response = await fetch('/api/SubmitValue',
+ {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(
+ {
+ type: type,
+ name: name,
+ val: val,
+ state: state
+ })
+ });
+
+ if (response.ok)
+ {
+ const result = await response.json();
+ console.log('Success:', result);
+ }
+ else
+ {
+ console.error('Error:', response.statusText);
+ }
+ }
+ catch (error)
+ {
+ console.error("Error submitting form data:", error);
+ }
+}
-generateForm("form1");
+function initializeInputHandlers()
+{
+ const formContainer = document.getElementById('form1');
+
+ formContainer.addEventListener('input', handleInputEvent);
+
+ generateForm(formContainer);
+}
+document.addEventListener('DOMContentLoaded', initializeInputHandlers);