Merge branch 'release/7.3.0'

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v7.3.0
+## 12/14/2023
+
+1. [](#new)
+   * Added XHR/Ajax form submission as an option in the form blueprint. See [Learn Forms](https://learn.getgrav.org/17/forms/forms/how-to-ajax-submission) for details.
+
 # v7.2.2
 ## 12/13/2023
 

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Form
 slug: form
 type: plugin
-version: 7.2.2
+version: 7.3.0
 description: Enables forms handling and processing
 icon: check-square
 author:

form.php

@@ -1135,6 +1135,10 @@ protected function shouldProcessForm(): bool
                 return false;
             }
 
+            if (isset($form->xhr_submit) && $form->xhr_submit) {
+                $form->set('template', $form->template ?? 'form-xhr');
+            }
+
             // Set page template if passed by form
             if (isset($form->template)) {
                 $this->grav['page']->template($form->template);

templates/form-xhr.html.twig

@@ -0,0 +1 @@
+{% extends "forms/default/form.html.twig" %}

templates/forms/default/form.html.twig

@@ -1,3 +1,4 @@
+{% block xhr %}{% endblock %}
 {% set form = form ?? grav.session.getFlashObject('form') %}
 {% set layout = layout ?? form.layout ?? 'default' %}
 {% set field_layout = field_layout ?? layout %}

templates/forms/form.html.twig

@@ -26,4 +26,9 @@ You can also override individual fields by copying (using text field as an examp
 templates/forms/fields/text/text.html.twig -> templates/forms/fields/text/tailwind-text.html.twig
 
 #}
+
 {% extends "forms/default/form.html.twig" %}
+
+{% block xhr %}
+{% include 'forms/layouts/xhr.html.twig' %}
+{% endblock %}

templates/forms/layouts/xhr.html.twig

@@ -0,0 +1,21 @@
+{% if form.xhr_submit == true %}
+  {% do assets.addInlineJs("
+    document.addEventListener('DOMContentLoaded', function() {
+        var form = document.getElementById('" ~ form.id ~ "');
+        form.addEventListener('submit', function(e) {
+            // prevent standard form submission
+            e.preventDefault();
+            // submit the form via Ajax
+            var xhr = new XMLHttpRequest();
+            xhr.open(form.getAttribute('method'), form.getAttribute('action'));
+            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+            xhr.onload = function() {
+                if (xhr.status === 200) {
+                    document.getElementById('" ~ form.id ~ "').innerHTML = xhr.responseText;
+                }
+            };
+            xhr.send(new URLSearchParams(new FormData(form)).toString());
+        });
+    });
+  ", {'group': 'bottom', 'position': 'before', 'priority': 100}) %}
+{% endif %}