Learn JavaScript Lesson 4 : The Document Object

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.


  

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.


    
   

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.


Document Object
  




and then in the routing add

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

you will end up with


 
 

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.


Document Object

  




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.

Leave a Comment

%d bloggers like this: