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
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.
and then in the routing add
Routing(Web) Q1.LayoutTemplate = "DocumentObject.html" Q1.ask() End Routing
you will end up with
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.