Use an actual "submit" input element instead of a "button"

This has the advantage of allowing the user to just press the Enter
key on any field of the form in order to submit it. For this we move
the invocation of our javascript handler for the form submission from
onclick() of the button to onsubmit() of the form itself. Finally, we
have to reutnr false from our new onsubmit() handler so that the
browser doesn't reload the page (which would clear the message that
results from a new player being added).

diff --git a/index.html b/index.html
index 2e539e7256a7c8229edb90ad83d1d59aecf9232a..7b4444527d51ff48a21a2ef7565185bfd5bd5909 100644 (file)
--- a/index.html
+++ b/index.html
@@ -26,14 +26,15 @@
   <div id="message-area">
   </div>
 
-  <form>
+  <!-- The return false prevents the page from being reloaded -->
+  <form onsubmit="register(this); return false">
     <label for="name">Your name</label>
     <input type="text" id="name" required>
 
     <label for="character">Character name</label>
     <input type="text" id="character" required>
 
-    <input type="button" value="Join game" onclick="register(this.form)">
+    <input type="submit" value="Join game">
   </form>
 
 </body>