Coursework 2: JavaScript Animation Game Spiced Up – Post 4

Today I will re-visit the way I am redirecting from one page to the other, because if you remember in my first post on coursework 2 I was the form to call another page on submit and pass it some values via the POST method and I wasn't quit happy with it as I wanted to validate the user input only on the client-side and redirect to the next page once the validation was successful. In reality this was not the case as the submit button was redirecting to the next page even when the validation failed.

Therefore I did some further research and discovered two alternative ways in which I could redirect to another page.

Alternate Redirect Method (1)

The first method I discovered was to use the XMLHttpRequest, thus making use of the power of AJAX technology in order to asynchronously request the server to authenticate the user via the posted variables, return the result and depending on the result, simply decide whether or not to redirect to the next page by using:

window.location.href = "whateverPage.php";

I did not implement this method, but for a detailed explanation of how to use XMLHttpRequest visit OpenJS.

Alternate Redirect Method (2)

The other method I found was to use JavaScript to create hidden a form and fields, which you populate with the user's input and submit programmatically. This method I decided to use, therefore I created a function in my login page which will post three values to the authentication.php page and I have attached my code below:

    
function redirect(){
   try{
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", "authentication.php");
                        
     //set userID parameter using hidden field
     var hiddenField1 = document.createElement("input");
     hiddenField1.setAttribute("type", "hidden");
     hiddenField1.setAttribute("name", "userID");
     hiddenField1.setAttribute("value", document.loginForm.userID.value);

     form.appendChild(hiddenField1);
                        
     //set password parameter using hidden field
     var hiddenField2 = document.createElement("input");
     hiddenField2.setAttribute("type", "hidden");
     hiddenField2.setAttribute("name", "password");
     hiddenField2.setAttribute("value", document.loginForm.password.value);
                    
     form.appendChild(hiddenField2);
                    
     //set remember me parameter using hidden field
     var hiddenField3 = document.createElement("input");
     hiddenField3.setAttribute("type", "hidden");
     hiddenField3.setAttribute("name", "rememberMe");
     hiddenField3.setAttribute("value", document.loginForm.rememberMe.checked);

     form.appendChild(hiddenField3);

     form.submit();
   }catch(err){
     alert(err);
   }
}

Code Breakdown:
The code on line 3 to 5 creates a form and set its 'action' and 'method' attributes, obviously I want my method to be POST and the action must contain the relative path to the authentication.php file.



                  var form = document.createElement("form");
                     form.setAttribute("method", "post");
                     form.setAttribute("action", "authentication.php");



Next I create an input element, set its type to hidden, give it the desired name and retrieve the user input from the visible fields via the DOM element and attach it to the form element I have just created:

    //set userID parameter using hidden field
     var hiddenField1 = document.createElement("input");
     hiddenField1.setAttribute("type", "hidden");
     hiddenField1.setAttribute("name", "userID");
     hiddenField1.setAttribute("value", document.loginForm.userID.value);


     form.appendChild(hiddenField1);


I repeat this process for every value I want to post and finally I call the form element's 'submit()' function:

form.submit();

This way I can call this function if and only if the validation process is a success, otherwise the request for the authentication.php or any other page for that matter will not be made.

Paper Toss Game Progress

With this posting through JavaScript issue out of the way, I can now focus on implementing the notifications, scoring and sign up function for new users. Now I basically have all I need to carry these tasks out, which are; a good method of posting variables along with my page requests and a solid way of communicating with the MySQL database, which I wrote about in my previous post.

The only visible improvement I did to the game was to change the paper and bin imaged to PNG files so that I got rid of the ugly white boxes around them.

Re-touched paper and bin images to remove white background