Just to give people a head-start to doing things with Javascript…
When it comes to Javascript in a Webpage, we basically have 3 layers:
- Window (the HTML portion of the page)
- Document (DOM - Document Object Model)
- Javascript
It’s important to know which layer (or Object) you are trying to affect, because different types of Objects have different Methods and Properties. Take the following code for example:
window.location.href = 'http://localhost/?screen=PURCHASE';
document.body.style.backgroundColor='#FF0000';
document.getElementById('sinventoryitemtypefilter').value='Coffee';
document.requests_FORM.igroupcodefilter.value='Coffee';
document.getElementById("requests_FORM").submit();
document.requests_FORM.submit();
var acollection = document.getElementsByTagName('a');
acollection[4].click();
var divcollection = document.getElementsByTagName('div');
divcollection[7].click();
This causes the window
to navigate to the given href
, in this case, a full URL is provided:
window.location.href = 'http://localhost/?screen=PURCHASE';
This causes the Document Tag Element called body
to set the value ‘#FF0000’ (red) into it’s backgroundColor
style
Property, effectively setting the page background color to Red:
document.body.style.backgroundColor='#FF0000';
This causes the Document Element whose ID
is defined as sinventoryitemtypefilter
to set the value ‘Coffee’ into it’s value
Property. This is a simple way to set a Form Input value programmatically:
document.getElementById('sinventoryitemtypefilter').value='Coffee';
This causes the Document Element whose FORM Name
is defined as requests_FORM
to set the Form Input element whose name is igroupcodefilter
to have ‘Coffee’ in it’s value
Property. This is another simple way to set a Form Input value programmatically:
document.requests_FORM.igroupcodefilter.value='Coffee';
This causes the Document Element whose FORM ID
is defined as requests_FORM
to invoke the submit() method, effectively sending the form data to the server to be processed.
document.getElementById("requests_FORM").submit();
This does the same thing as above, but in this case we are referencing the FORM Name
defined as requests_FORM
to invoke the submit() method.
document.requests_FORM.submit();
This code searches the Document for all HTML Tag Elements of type ‘a
’ and stores them into an array object called acollection
. It then invokes the click()
method on the 5th member of the acollection
array. HTML Tags which go by the Name of a
are Hyperlink tags, so this is like clicking on a hyperlink.
var acollection = document.getElementsByTagName('a');
acollection[4].click();
This code searches the Document for all HTML Tag Elements of type ‘div
’ and stores them into an array object called divcollection
. It then invokes the click()
method on the 6th member of the divcollection
object. HTML Tags which go by the Name of div
can be thought of as formatting blocks or boxes in the page, so this is like clicking on one of those blocks. This may or may not have any effect on the div
in question, but if the div
element has an onClick()
handler, something will happen.
var divcollection = document.getElementsByTagName('div');
divcollection[7].click();