SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Problem with replacing ajax post method with pure javascript function

    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,

  2. #2
    SitePoint Addict ketting00's Avatar
    Join Date
    Jul 2011
    Posts
    325
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Solve this:
    JS file:
    Code:
    var error = document.getElementById('error')
      , signup_form = document.getElementById('signup_form');
      
    function register() {
    	var data = new FormData(signup_form);
    	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(data);
    }
    signup_form.addEventListener('submit', function(e) {
    	register();
    	e.preventDefault();
    });
    function removeError() {
    	error.style.display = 'none';
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •