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?