clean up js example

docs/patterns/jquery.rst

@@ -163,5 +163,5 @@ explanation of the little bit of code above:
    we set earlier.
 
 Check out the :gh:`example source <examples/javascript>` for a full
-application demonstrating the jQuery on this page, as well as the same
+application demonstrating the code on this page, as well as the same
 thing using ``XMLHttpRequest`` and ``fetch``.

examples/javascript/js_example/templates/base.html

@@ -23,7 +23,7 @@
 <hr>
 <p>{% block intro %}{% endblock %}</p>
 <hr>
-<form>
+<form id="calc">
   <label>a <input name="a"></label>
   <span>+</span>
   <label>b <input name="b"></label>

examples/javascript/js_example/templates/fetch.html

@@ -13,7 +13,7 @@
   <script>
     function addSubmit(ev) {
       ev.preventDefault();
-      fetch('{{ url_for('add') }}', {
+      fetch({{ url_for('add')|tojson }}, {
         method: 'POST',
         body: new FormData(this)
       })
@@ -30,6 +30,7 @@
       span.innerText = data.result;
     }
 
-    document.forms[0].addEventListener('submit', addSubmit);
+    var form = document.getElementById('calc');
+    form.addEventListener('submit', addSubmit);
   </script>
 {% endblock %}

examples/javascript/js_example/templates/jquery.html

@@ -13,7 +13,7 @@
       ev.preventDefault();
       $.ajax({
         method: 'POST',
-        url: '{{ url_for('add') }}',
+        url: {{ url_for('add')|tojson }},
         data: $(this).serialize()
       }).done(addShow);
     }
@@ -22,6 +22,6 @@
       $('#result').text(data.result);
     }
 
-    $('form:first').on('submit', addSubmit);
+    $('#calc').on('submit', addSubmit);
   </script>
 {% endblock %}

examples/javascript/js_example/templates/plain.html

@@ -12,7 +12,7 @@
       ev.preventDefault();
       var request = new XMLHttpRequest();
       request.addEventListener('load', addShow);
-      request.open('POST', '{{ url_for('add') }}');
+      request.open('POST', {{ url_for('add')|tojson }});
       request.send(new FormData(this));
     }
 
@@ -22,6 +22,7 @@
       span.innerText = data.result;
     }
 
-    document.forms[0].addEventListener('submit', addSubmit);
+    var form = document.getElementById('calc');
+    form.addEventListener('submit', addSubmit);
   </script>
 {% endblock %}