donation: Move amount into hidden attribute

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/donate.html b/src/templates/donate.html
index a9b17695386210f02107823a87ae4240d6f8a6df..ac4e942e4f4fea3f821213f1e661650dd548b247 100644 (file)
--- a/src/templates/donate.html
+++ b/src/templates/donate.html
@@ -50,10 +50,12 @@
                                                                        <div class="my-5 p-5 bg-light">
                                                                                <h6>{{ _("Choose an amount") }}</h6>
 
+                                                                               <input type="hidden" name="amount" required>
+
                                                                                <div class="btn-group-toggle flex-wrap mb-3" data-toggle="buttons">
                                                                                        {% for amount in amounts %}
                                                                                                <label class="btn btn-secondary btn-lg mb-2">
-                                                                                                       <input type="radio" name="amount" value="{{ amount }}"
+                                                                                                       <input type="radio" name="amount-selector" value="{{ amount }}"
                                                                                                                autocomplete="off"> <span class="USD">$</span>{{ amount }} <span class="EUR">€</span>
                                                                                                </label>
                                                                                        {% end %}
@@ -65,7 +67,7 @@
                                                                                        </label>
 
                                                                                        <div class="col-sm-5">
-                                                                                               <input type="number" class="form-control form-control-lg" id="enterYourOwn">
+                                                                                               <input type="number" class="form-control form-control-lg" name="amount-input">
                                                                                        </div>
                                                                                </div>
 
@@ -340,6 +342,8 @@
 {% block javascript %}
        <script type="text/javascript">
                $(document).ready(function() {
+                       var amount = $("input[name='amount']");
+
                        $(".USD").hide();
 
                        $("input[name='currency']").on("change", function() {
@@ -364,6 +368,28 @@
                                }
                        })
 
+                       // Copy amount when clicking on a radio button
+                       $("input[name='amount-selector']").on("change", function() {
+                               var value = $(this).val();
+                               if (value) {
+                                       amount.val(value);
+
+                                       // Clear input field
+                                       $("input[name='amount-input']").val("");
+                               }
+                       });
+
+                       $("input[name='amount-input']").on("change", function() {
+                               var value = $(this).val();
+                               if (value) {
+                                       amount.val(value);
+
+                                       // Uncheck all radio buttons
+                                       $("input[name='amount-selector']").removeAttr("checked");
+                                       $("input[name='amount-selector']").prop("checked", false);
+                               }
+                       });
+
                        $("#next").click(function (event) {
                                event.preventDefault();