Merge pull request #52 from haacked/haacked/50-submit-value

Propagate submit value
haacked · Jul 3, 2023 · da9e5e2 · da9e5e2
2 parents 17f8a79 + e4df6f6
commit da9e5e2
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 3 deletions.
diff --git a/Pages/Demos/SubmitButton.cshtml b/Pages/Demos/SubmitButton.cshtml
@@ -0,0 +1,44 @@
+@page
+@model DemoWeb.Pages.Demos.SubmitButton
+
+@{
+    Layout = "Shared/_Layout";
+}
+
+<fieldset>
+<legend>Required ASP.NET Checkboxes with hidden input</legend>
+
+<form method="post">
+    <div class="form-field">
+        <p>
+            This simple test demonstrates that we ensure that submit buttons.
+        </p>
+
+        <input type="submit" asp-for="SubmitButtonValue" value="Input Type Submit" />
+        <input type="submit" value="Input Type Submit No Name" />
+        <input type="submit" name="SubmitButtonValue" />
+        <button type="submit" name="SubmitButtonValue" value="Submit That!">Button with name and value</button>
+
+        <button type="submit" value="Submit That!">Button no name</button>
+        <button type="submit" name="SubmitButtonValue">Button with name, no value</button>
+
+        @if (Model.SubmitButtonValue is not null) {
+            <span class="results">
+                The submitted button value is "@Model.SubmitButtonValue".
+            </span>
+
+            <p>The submitted form collection:</p>
+            <table class="form-data">
+                @foreach (var item in Request.Form) {
+                    <tr>
+                        <th>@item.Key</th>
+                        <td>@item.Value</td>
+                    </tr>
+                }
+            </table>
+        }
+
+
+    </div>
+</form>
+</fieldset>
diff --git a/Pages/Demos/SubmitButton.cshtml.cs b/Pages/Demos/SubmitButton.cshtml.cs
@@ -0,0 +1,17 @@
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace DemoWeb.Pages.Demos;
+
+public class SubmitButton : PageModel
+{
+    [BindProperty]
+    [Required]
+    public string? SubmitButtonValue { get; set; }
+
+    public void OnPost()
+    {
+        SubmitButtonValue ??= "Form submitted, but button value not submitted";
+    }
+}
diff --git a/Pages/Index.cshtml b/Pages/Index.cshtml
@@ -7,6 +7,7 @@
 <h1>Other Demos</h1>
 <ul>
     <li><a asp-page="Demos/Checkboxes">Checkboxes</a></li>
+    <li><a asp-page="Demos/SubmitButton">Submit Button</a></li>
 </ul>
 
 @if (Model.StatusMessage != null) {
@@ -27,6 +28,10 @@
             <th>Selected Color: </th>
             <td>@Model.SelectedColor</td>
         </tr>
+        <tr>
+            <th>Button Value: </th>
+            <td>@Model.SubmitButton</td>
+        </tr>
     </table>
 }
 
@@ -68,7 +73,7 @@
             <span asp-validation-for="SelectedColor"></span>
         </div>
 
-        <button type="submit" class="btn">Save</button>
+        <input type="submit" asp-for="SubmitButton" class="btn" value="Save" />
     </form>
 </fieldset>
 

diff --git a/Pages/Index.cshtml.cs b/Pages/Index.cshtml.cs
@@ -27,6 +27,9 @@ public class IndexModel : PageModel
     [Required]
     public string? SelectedColor { get; set; }
 
+    [BindProperty]
+    public string? SubmitButton { get; set; }
+
     public string[] Colors = new[] { "Red", "Green", "Blue" };
 
     public IActionResult OnPost()

diff --git a/dist/aspnet-validation.js b/dist/aspnet-validation.js
@@ -541,6 +541,20 @@ var ValidationService = /** @class */ (function () {
         this.submitValidForm = function (form, submitEvent) {
             var newEvent = new SubmitEvent('submit', submitEvent);
             if (form.dispatchEvent(newEvent)) {
+                // Because the submitter is not propagated when calling
+                // form.submit(), we recreate it here.
+                var submitter = submitEvent.submitter;
+                if (submitter) {
+                    var name_1 = submitter.getAttribute('name');
+                    // If name is null, a submit button is not submitted.
+                    if (name_1) {
+                        var submitterInput = document.createElement('input');
+                        submitterInput.type = 'hidden';
+                        submitterInput.name = name_1;
+                        submitterInput.value = submitter.getAttribute('value');
+                        form.appendChild(submitterInput);
+                    }
+                }
                 form.submit();
             }
         };

diff --git a/dist/aspnet-validation.min.js b/dist/aspnet-validation.min.js
diff --git a/dist/aspnet-validation.min.js.map b/dist/aspnet-validation.min.js.map
diff --git a/src/index.ts b/src/index.ts
@@ -715,6 +715,21 @@ export class ValidationService {
     submitValidForm = (form: HTMLFormElement, submitEvent: SubmitEvent) => {
         const newEvent = new SubmitEvent('submit', submitEvent);
         if (form.dispatchEvent(newEvent)) {
+            // Because the submitter is not propagated when calling
+            // form.submit(), we recreate it here.
+            const submitter = submitEvent.submitter;
+            if (submitter) {
+                const name = submitter.getAttribute('name');
+                // If name is null, a submit button is not submitted.
+                if (name) {
+                    const submitterInput = document.createElement('input');
+                    submitterInput.type = 'hidden';
+                    submitterInput.name = name;
+                    submitterInput.value = submitter.getAttribute('value');
+                    form.appendChild(submitterInput)
+                }
+            }
+
             form.submit();
         }
     }