Creating a Session ID from a Form

You are here
Creating a Session ID from a Form

Overview

A session ID helps identify test data in the database. It's possible to create a session ID based on information entered into a form by a user. This is the process we'll be explaining below.

At the end of this tutorial there will be a test page to see it in action.

Create the Form

Below is some simple HTML that can be used to create the form. It's two text fields, for name and email address, and a submit button. The form is set to call a JavaScript function, which will take the values and form the test.

<form name="inputform" id="inputform" onSubmit="return starttest()">
<p>Enter your name <input type="text" id="username"></p>
<p>Enter your email address <input type="email" id="useremail"></p>
<p><input type="submit" value="Start Test"></p>
</form>

Simply copy and paste this code where the form should appear.

Create the Canvas DIV

Copy and paste the empty DIV below where the test GUI should appear.

<div id="canvas-container"></div>

Create the JavaScript

When the form is submitted it calls a JavaScript function called starttest(). The code below is how this should look.

<script>
var m_applet_params;	
function starttest() {

var user_name = document.getElementById('username').value; //get the value of the Name input
var user_email = document.getElementById('useremail').value; //get the value of the Email input

//Set the default parameters to be used for the test. 
//NOTE: update the codebase to point to your own MCS URL/IP
m_applet_params += '<applet width="600" height="400" codebase="mcsnyc.visualware.com">';
m_applet_params += '<param name="testspecid" value="-2">';
m_applet_params += '<param name="config" value="default">';

//Combine the values of name and email to form the session ID
m_applet_params += '<param name="sid" value="*'+ user_name + '_' + user_email + '">';	
m_applet_params += '</applet>';
		
//Set the <canvas> tags in the Canvas DIV. This is where the test will appear
document.getElementById('canvas-container').innerHTML = '<canvas id="canvs3" style="background-color:#F0F0F0;">Your browser does not support the HTML5 canvas tag.</canvas>';
		
//Hide Form
document.getElementById('inputform').style.display = 'none';
		
//Add the boot library to the body of the page. The loading of this file initiates the test
var ele = document.createElement('script'); //Create the script element
ele.src = 'http://mcsnyc.visualware.com/boot.lib'; //update to your own MCS URL/IP
document.getElementsByTagName("head")[0].appendChild(ele); //append to the page

return false; //don't actually submit the form

}
</script>

Run Example

Click here to see this simple example in action.