JavaScript Code Examples

* Basic examples - JavaScript pop-up boxes, browser redirect

Pop-up boxes - This is an example of two pop-up boxes on a page when a link is clicked.

<script language="JavaScript">
function show_numbers() {
window.open("ContactNumbers.htm","","width=400,height=200");
}
function show_messaging() {
window.open("http://messaging.htm","","width=650,height=400,scrollbars=yes");
}
</script>

HTML Code:

<a href='javascript:show_numbers()'>Contact us by phone!</a>
<a href='javascript:show_messaging()'>Or Text Message!</a>

To see in use - click here

---

Browser Redirection

<script language="javascript">
window.location="main.htm"
</script>

* Intermediate examples - JavaScript toggle text

Toggle Text - This example shows you how to show or hide text by clicking the link.

<script language="javascript">
function toggle(targetId) {
target = document.all(targetId);
if (target.style.display == "none"){
target.style.display="";
} else {
target.style.display="none";
}
}
//-->
</script>

HTML Code:

<a href="javascript:toggle('Link1')">Link 1 </a>
<div id="Link1" style="display: none">
<div align="justify"><font color="#000000" size="2" face="Verdana">Here is the text you would like to show for Link 1.</font></div>
</div>
<br><br>
<a href="javascript:toggle('Link2')">Link 2</a>
<div id="Link2" style="display: none">
<div align="justify"><font color="#000000" size="2" face="Verdana">Here is the text you would like to show for Link 2.</font></div>
</div>

Note: The code between the div tags is what will be displayed once the link is clicked. Each ID would be different for each link. To have one of them automatically display instead of using "display: none" use "display: """.

* Advanced examples - JavaScript form field validation, populate list box from selection, add item to listbox and remove item from listbox

Form field validation - This example shows you how to make sure that a field is filled in.

<script language="JavaScript" type="text/javascript">
function validate()
{
if (document.title_of_form.form_box_name.value.length == 0) {
alert("You must fill in Submitted By");
return false;
}

ischecked=false;
if (document.title_of_form.name_of_checkbox.checked) {

if (ischecked==false)
{
alert("You must check at least one box");
return false;
}
return true;
}
</script>

---

Populate listbox from selection - This example shows how to populate listbox after making another listbox selection.

<script language="javascript">
function setOption(form, index) {
for (var i = 0; i < form.Listbox1.length; i++) {
form.Listbox1.options[i].text = "";
form.Listbox1.options[i].value = "";
}
if (index == 1) {
form.Listbox1.options[0].text = "Red";
form.Listbox1.options[0].value = "Red";
form.Listbox1.options[1].text = "Blue";
form.Listbox1.options[1].value = "Blue";
} else if (index == 2) {
form.Listbox1.options[0].text = "Green";
form.Listbox1.options[0].value = "Green";
form.Listbox1.options[1].text = "Black";
form.Listbox1.options[1].value = "Black";
}
for (var i = 0; i < form.Listbox2.length; i++) {
form.Listbox2.options[i].text = "";
form.Listbox2.options[i].value = "";
}
if (index == 1) {
form.Listbox2.options[0].text = "Blue";
form.Listbox2.options[0].value = "Blue";
form.Listbox2.options[1].text = "Red";
form.Listbox2.options[1].value = "Red";
} else if (index == 2) {
form.Listbox2.options[0].text = "Black";
form.Listbox2.options[0].value = "Black";
form.Listbox2.options[1].text = "Green";
form.Listbox2.options[1].value = "Green";
}
form.Listbox1.selectedIndex = 0;
form.Listbox2.selectedIndex = 0;
}
</script>

HTML Code:

<form action="example.php" name="main" method="post">
<p>Colors: <select name="Type" id="Type" onChange="setOption(this.form, this.selectedIndex)">
<option value="">Select:</option>
<option value="Colors:Red/Blue">Colors: Red/Blue</option>
<option value="Colors:Green/Black">Colors: Green/Black</option>
</select></p>
<p> Color 1: <select name="Listbox1" size="1" id="Listbox1">
<option></option>
<option></option>
</select></p>
<p>Color 2: <select name="Listbox2" size="1" id="Listbox2">
<option></option>
<option></option>
</select>
</form>

To see in use - click here

---

Add/Remove items to listbox - This example shows how to add and remove items to a listbox.

<script language="javascript" type="text/javascript">
function AddItemtoListbox()
{
var item = "MyFirstItem";
var opt = document.createElement("option");
document.getElementById("Listbox_id").options.add(opt);
opt.text = item;
opt.value = item;
}

function RemoveItemfromListbox()
{
var item = "MyItemtoRemove";
var opt = document.createElement("option");
document.getElementById("Listbox_id).options.remove(opt);
opt.text = item;
opt.value = item;
}