I'm trying to replace an ajax function with pure javascript, so I can use the async attribute in my javascript tag and get rid of a jquery library completely. However, this sitepoint's blog post didn't help me much and I'm struck: http://www.sitepoint.com/jquery-vs-r...3-events-ajax/
Code:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<form id=signup_form method=post action='signup.php'>
			<ul>
				<li><input id=name name=name placeholder='Your Name' title='Your Name' type=name required /></li>
				<li><input id=email name=email placeholder='Your Email' title='Your Email' type=email required /></li>
				<li><input id=password name=password placeholder='Your Password' title='Your Password' type=password required /></li>
				<li><input id=submit name=submit type=submit value='Sign Up' /></li>
			</ul>
			<ul id=error>
				<li></li>
			</ul>
		</form>
	</body>
</html>
The js file:
Code:
var signup_form = document.getElementById('signup_form'),
	submit = document.getElementById('submit'),
	error = document.getElementById('error');
function register() {
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "signup.php", true);
	xhr.onreadystatechange = function () {
		if (xhr.readyState === 4) {
			var msg = JSON.parse(xhr.responseText);
			if(msg.status === 1) {
				window.location = msg.txt;
			} else if(msg.status === 0) {
				error.style.display = 'block';
				error.innerHTML = msg.txt;
				var t = setTimeout("removeError()",4000);
			}
		}
	};
	xhr.send();
}
submit.addEventListener('click', register, false);

function removeError() {
	error.style.display = 'none';
}
PHP:
Code:
<?php
	function msg($status,$txt) {
		return '{"status":'.$status.',"txt":"'.$txt.'"}';
	}
	
	// check if every required field is filled in
	if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['password'])) {
		die(msg(0,"All the fields are required."));
	}
	
	// minimum pasword lenght
	if(strlen($_POST['password']) < 6){
		die(msg(0,"Password must be at least 6 characters."));
	}
	
	if ($result = $mysqli->query("SELECT email, name FROM user ORDER BY id ASC")) {
		// insert data received from a form into database
	}
	
	echo msg(1,"signup_success.php");
?>
The problem: The function works as expected if I submitted all empty fields. However, it takes me to signup.php if all the fields are filled in and an error occured.
How to solve this?

Thank you,