Learn JavaScript Lesson 4 : The Document Object

Sunday, August 23rd, 2009 | IBM SPSS Professional, Learn HTML, Learn JavaScript, Learn mrInterview Tags, mrStudio

Before we start to create some cool things with our JavaScript and our survey pages there is one more thing we must understand how to use. What we will need to be able to do is to reference our html page and all the things on it with JavaScript. To do this we need to use the Document Object. This article is about the document object and the main properties that we will need to use.

When we have an HTML page in our survey , all our questions sit inside an HTML Form. To get at the contents of the form we need to use the Document object as it represents the entire HTML document and can be used to access all elements in a page. The Document object is part of the Window object and is accessed through the window.document property. It has many properties and methods and for more information on this you can visit here. We at this stage are only interested in the getElementById () method. This returns a reference to the first object with the specified id. At this stage that might be hard to understand, but let’s put it in English. Let’s say you have a text question on your survey page and we had added the following Data Collection Server tag to our template.

</head>
  <mrPage IncludeElementIDs = "true" ></mrPage>
<body>

In this example what we want to do is to fill our text box on page load with the value “HELLO WORLD”. The first thing we need to find out is the ID of the text box. This is done by viewing the source of the webpage when you survey is running. So create an MDD in Professional with the following Metadata

Metadata(en-AU, Question, label)
Q1 "My Text Question" text;
End Metadata

and Routing.

Routing(Web)
Q1.ask()
End Routing

Run the survey and while it is still running , right mouse click the web page and select view source. You should see the whole html code for this page, look for the following.

<span style="display: inline-block;">
    <div></div>
    <textarea name="_QQ1" autocomplete="off" style="margin-left: 1em;"
                   rows="6" cols="40"></textarea>
</span>

You will notice , that by default the name of our text box is “_QQ1″ but we don’t seem to have an Id=”" so let’s add a template to our survey.

<html>
<head><title>Document Object</title></head>
  <mrPage IncludeElementIDs = "true" ></mrPage>
<body>
<mrData />
<mrNavBar />
</body>
</html>

and then in the routing add

Routing(Web)
Q1.LayoutTemplate = "DocumentObject.html"
Q1.ask()
End Routing

you will end up with

<span style="display: inline-block;">
 <div></div>
 <textarea name="_QQ1" id="_Q0" autocomplete="off" style="margin-left: 1em;"
            rows="6" cols="40"></textarea>
</span>

So now we know that the id for the particular thing that we want to play with ( the text box ) has an id of “_Q0″. So the JavaScript to create a link to that object would be,

var oLink = window.document.getElementById("_Q0") ;

This then gives us access to all the text box properties one of which is the value property so we could , for example set the content of the text box to “HELLO WORLD” with the following code.

oLink.value = "HELLO World";

All items and the page itself have events that we can get access to do things for example “OnClick” or “OnMouseOver”. In our example we will use the onload event of the page to run our code.

<html>
<head><title>Document Object</title></head>
<script type="text/javascript">
function SetValue()
  {
  var oLink = window.document.getElementById("_Q0");
  oLink.value = "HELLO World";
  }
</script>
  <mrPage IncludeElementIDs = "true" ></mrPage>
<body onload="javascript:SetValue();">
<mrData />
<mrNavBar />
</body>
</html>

Ok so there we have it our first interaction with JavaScript and a Data Collection page. In the next article we will look at how we can interact with a categorical question every time one of the options is selected.