Insight Eye

Eyewear Offers


Insight Eye JavaScript Codes

Collection of usefull JavaScript codes released under Creative Commons License. The scripts are short and logically simple to understand, making them ideal for learning JavaScript coding.


  1. Email Page URL
  2. Clear Text Box
  3. Select All Text Box
  4. Hide Email Address
  5. Accept Terms & Conditions
  6. Accept Terms & Conditions (Text link version)
  7. Form Box Counter
  8. Randomize Anything
  9. Click Confirm

Creative Commons Licence


1. Email Page URL

Recommend any web page throughout a website. The URL to the page is sent via the visitors default email program. Also works with online email like Gmail etc.

Demo

Recommend this Page to a Friend!

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function emailink(){
window.location = "mailto:"+"?subject=This web page might interest you..." + "&body="+window.location.href;
}
//-->
</script>

Insert anywhere within the body of the web page.

<a href="javascript:emailink()">Recommend this Page to a Friend!</a>

2. Clear Text Box

With instructions in the box field, clicking the field clears the text from the box. When the box is empty and the user clicks outside the box, the pre-set text returns.

Demo

Code

<input type="text" name="abox" value="username" onfocus="javascript:if(this.value=='username') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='username'}">

3. Select All Text Box

Highlight the contents of a text box for easier copying.

Demo


click to select all text

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//-->
</script>

Insert anywhere within the body of the web page or within a <form></form> section.

<form name="name_a">
<textarea name="name_b" cols="28" rows="3"> the box text... </textarea>
<a href="javascript:selectAll('name_a.name_b')">click to select all text</a>
</form>

Notes

<form name="name_a"> and <textarea name="name_b">

needs to match in the line:

<a href="javascript:selectAll('name_a.name_b')">


4. Hide Email Address

Uses JavaScript to display an email address - helps prevent spam bots harvesting the address. Note this is only a general prevention method.

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function em1234567890(a) {
RE = /^(.+)\#(.+)$/;
var launch = a.replace(RE,"mailto:$1@$2");
window.location = launch;
}
//-->
</script>

Insert anywhere within the body of the web page.

<a href="javascript:em1234567890('you#yoursite.com')">e-mail us</a>

Notes

Change both instances of 'em1234567890' to any unique number/letter combination. The # character will be replaced with @. Use a different character as you like.


Hostgator Webhosting Offer

5. Accept Terms & Conditions

Requires acceptance of some terms before proceeding to the next page.

Demo

I ACCEPT THE TERMS & CONDITIONS:

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function checkCheckBox(f){
if (f.agree.checked == false )
{
alert("Please tick the box to continue");
return false;
} else
return true;
}
//-->
</script>

Insert anywhere within the body of the web page.

<form action="tc_yes.html" method="GET" onsubmit="return checkCheckBox(this)">
I accept: <input type="checkbox" value="0" name="agree">
<input type="submit" value="Continue">
<input type="button" value="Exit" onclick="document.location.href='index.html';">
</form>

Notes

If you receive error: "Method Not Allowed" then change the line method="POST" to method="GET" - the script works in both modes.

The destination for the Exit button code -- 'document.location.href='index.html' -- can be any page in your website.

The line -- "tc_yes.html" -- should be the page your visitors are clicking through to.


6. Accept Terms & Conditions - Text Link Version

Functions as the above code but uses a text link instead of form button.

Demo

I ACCEPT THE TERMS & CONDITIONS:

Continue | Exit

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function checkCheckBoxAgree(c){
if (c.agree_text.checked == false )
{
alert("Please tick the box to continue.");
return false;
} else
return true;
}
//-->
</script>

Insert anywhere within the body of the web page.

<form name="agreeform" action="#">
I accept: <input name="agree_text" type="checkbox" value="0">
<a href="tc_yes.html" onclick="return checkCheckBoxAgree(document.forms['agreeform'])"> | <a href="tc_exit.html">Exit</a>
</form>

Notes

If you receive error: "Method Not Allowed" then change the line method="POST" to method="GET" - the script works in both modes.

The destination for the Exit button code -- 'document.location.href='index.html' -- can be any page in your website.

The line -- "tc_yes.html" -- should be the page your visitors are clicking through to.


7. Form Box Counter

If you have a form box that requires a certain amount of characters to be entered into the box, then this script will help with this. A dialog box will inform the user how many characters have been entered and a warning given if over the designated amount. The code is set for 5 characters maximum. Add 1 more character to see the effect.

Demo


Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function CheckSize(form, field) {
if (field ==1) {
Ctrl = form.test;
y = 30;
x = Ctrl.value.length;
}
if (x < y)
SendMsg (Ctrl, "Number of characters is: " + x); else
SendMsg (Ctrl, "Too long - number of characters is: " + x);}
function SendMsg (Ctrl, PromptStr) { alert (PromptStr);
Ctrl.focus(); return;
}
//-->
</script>

Insert this section within your current form.

<textarea rows="2" cols="32" name="test">1234</textarea>
<input onclick="CheckSize(this.form,1)" type="button" value="count">

Notes

The line -- Ctrl = form.test -- needs to be the same name as the form box you wish to count - <textarea rows="2" cols="32" name="test">


8. Randomize Anything - text, images, etc

This script will randomize text, image ads or just about anything else you like.

Code

Insert wherever you want the random item to display.

<script type="text/javascript">
<!--
function randa() {
};
randa = new randa();
number = 0;
// keep adding these for more random items
randa[number++] = 'item-1'
randa[number++] = 'item-2'
randa[number++] = 'item-3'
increment = Math.floor(Math.random() * number);
document.write(randa[increment]);
//-->
</script>

Notes

If a single (') apostrophe or (") double quotes are needed in a line of randomized text, you need to escape those characters like this ---
Nature/'s inexorable imperative.


9. Click Confirm

This script will give a simple OK/Cancel confirmation box upon clicking a link.

Demo

Next Page

Code

Insert within <HEAD></HEAD>

<script type="text/javascript">
<!--
function warn123(){if(confirm("Are you sure you want to continue?"))location.href="/webpage"};
//-->
</script>

This is the link code trigger to warning.

<a href="#" onclick="warn123();">Next Page</a>

Notes

The section -- location.href="/webpage" -- needs to be the page you want going to.

 

 

 

 


CREATIVE COMMONS

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

These free JavaScript codes are offered at no charge for commercial and personal use. All codes are provided as-is and for educational merit. Note that these scripts are not supported by the author.

Please support our sponsours for Insight Eye Care and glasses care Eye Care.


(c) Insight Eye Publishing | Contact | Home

Hostgator Coupons

Web Hosting Offers

W3Schools JavaScript Tutorials