From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 17 Jul 2018 11:05:22 +0000 (+0100)
Subject: donation: Move amount into hidden attribute
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=6d151de335c4696145615c7bcf6995845212d611;p=ipfire.org.git

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 a9b17695..ac4e942e 100644
--- 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();