Should Be Simple

Living with software

Evolution

In the beginning, there was html:

<form method=post action=signup>
   <label>Username       <input name=user></label>
   <label>Password       <input name=pw type=password></label>
   <label>Password again <input name=pwv type=password></label>
   <button>Submit</button>
</form>

Then came JavaScript:

<form id=signup method=post action=signup>
   <label>Username       <input name=user></label><br>
   <label>Password       <input name=pw type=password></label><br>
   <label>Password again <input name=pwv type=password></label><br>
   <button>Submit</button>
</form>

<script>
<!--
document.forms.signup.onsubmit = function () {
   if (this.pw.value != this.pwv.value) {
      alert("Passwords don't match")
      return false
   }
}
// -->
</script>

And jQuery:

<script src="https://code.jquery.com/jquery-1.1.4.js"></script>

<form id="signup" method="post" action="signup">
   <label>Username       <input name="user"></label><br/>
   <label>Password       <input name="pw" type="password"></label><br/>
   <label>Password again <input name="pwv" type="password"></label><br/>
   <button>Submit</button>
</form>

<script>
// <![CDATA[
$('#signup').submit(function () {
   if (this.pw.value != this.pwv.value) {
      alert("Passwords don't match")
      return false
   }
})
// ]]>
</script>

And json:

<script src="https://code.jquery.com/jquery-1.5.js"></script>

<form id="signup">
   <label>Username       <input name="user"></label><br/>
   <label>Password       <input name="pw" type="password"></label><br/>
   <label>Password again <input name="pwv" type="password"></label><br/>
   <button>Submit</button>
</form>

<script>
/*jslint browser: true */
/*global $, alert, window */

$("#signup").submit(function (event) {
   "use strict";

   var form = $(event.target);
   var formData = {};

   form.find("input").each(function (ignore, el) {
      var input = $(el);
      var name = input.attr("name");
      formData[name] = input.val();
   });

   if (formData.pw !== formData.pwv) {
      alert("Passwords don't match");
   } else {
      $.ajax("signup", {
         type: "POST",
         contentType: "application/json",
         data: JSON.stringify(formData)
      }).done(function () {
         window.location = "signup";
      }).fail(function () {
         alert("Error");
      });
   }

   return false;
});
</script>

And Ecma 6:

<form id="signup">
<label>Username       <input name="user"></label><br>
<label>Password       <input name="pw" type="password"></label><br>
<label>Password again <input name="pwv" type="password"></label><br>
<button>Submit</button>
</form>

<script>
/*jshint esversion: 6 */
document.querySelector("#signup").addEventListener("submit", submitEvent => {
   "use strict";

   const form = submitEvent.target;
   const formData = {};

   submitEvent.preventDefault();

   for (const input of form.querySelectorAll("input")) {
      var name = input.getAttribute("name");
      formData[name] = input.value;
   }

   if (formData.pw !== formData.pwv) {
      alert("Passwords don't match");
   } else {
      const xhr = new XMLHttpRequest();
      xhr.addEventListener("load", () => {
            if (xhr.status === 200) {
               window.location = "signup";
            } else {
            alert("Error");
         }
      });
      xhr.addEventListener('error', _ => {
         alert('Error');
      });
      xhr.open("POST", "signup");
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(JSON.stringify(formData));
   }
});
</script>

Progress?


Posted in programming html javascript

Comments on Evolution

No comments

To comment write to [email protected] (Subject: Comment on Evolution). I may irrevocably post what you write to this site, but I won't post your email address, and I won't post your name unless to explicitly request it.