HTML & JavaScript Loader
November 14th, 2009 — adminIn this program just change the source of iframe and your loading.gif will show upto that time when page will not upload finally.
For Demo Click Here
Download Script Click Here
JavaScript - Agree Before Entry -Source Code
June 4th, 2009 — adminSave this code as external JavaScript file named: agree.js
var agree=0;
// 0 = ‘no’, 1 = ‘yes’
function agree2() {
if (!document.getElementById) return false;
agree=1;
document.getElementById(’box’).style.background=’#fff000′;
if (agree) {
document.getElementById(’enterName’).style.visibility = ‘visible’;
}
document.enableform.box.focus();
}
function disagree() {
if (!document.getElementById) return false;
agree=0;
if (!agree) {
document.getElementById(’enterName’).style.visibility = ‘hidden’;
}
document.enableform.done.focus();
}
function goSubmit() {
if (agree==0) {
alert(”DISGREE: You can insert the next step here”);
} else if (agree==1 && document.enableform.box.value==”) {
alert(”You must enter your name!”);
document.enableform.box.focus();
} else {
alert(”AGREE: You can insert the next step here”);
}
}
Save this code in the <style> section within the HEAD section of HTML document.
#enterName {
visibility: hidden;
padding-left: 50px;
}
Save this code into the HEAD section of HTML document
<script type=”text/javascript” src=”agree.js”></script>
Save this code into the BODY section of HTML document
<form name=”enableform”>
<input type=”radio” name=”enable” value=”agree” onclick=”agree2();”>I agree
<div id=”enterName”>Please enter your name to show agreement: <input type=text id=”box” name=”box”></div>
<input type=”radio” name=”enable” value=”disagree” onclick=”disagree();”>I disagree
<br><br>
<input type=”button” value=”Done!” name=”done” onclick=”goSubmit()”>
</form>
Free-Code-JavaScript
March 8th, 2008 — admin- JavaScript - Increament function Script
- JavaScript - E-mail Validation Script
JavaScript - Increament function
November 24th, 2007 — admin<HTML><HEAD><TITLE>ABC</TITLE>
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>
<!–
a = 23;
function ad()
{
a = (++a);
alert(a);
}
//–>
</script>
</HEAD>
<BODY>
<a href=”javascript:ad();” mce_href=”javascript:ad();” title=”Add more” name=”add”>
Add More Records
</a>
</BODY></HTML>
OnSubmit
November 6th, 2007 — adminWhen using JavaScript to check a form, the first thing you need is the onsubmit event handler. This event handler specifies a script that is executed when the user submits the form. That script is where you check whether certain fields have a value, whether the user has checked at least one checkbox, and any other checks you deem necessary.
The general syntax is:
<form action=”something.pl” onsubmit=”return checkscript()”>
where checkscript() is the name of the script. This script should return either true
or false. If false is returned, the form will not be submitted. If either true or false is returned the script stops.
So the general script becomes something like:
function checkscript()
{
if (some value is/is not something)
{
// something is wrong alert(’alert user of problem’);
return false;
}
else if (another value is/is not something)
{
// something else is wrong alert(’alert user of problem’);
return false;
}
// If the script makes it to here, everything is OK,
// so you can submit the form return true;
}
Of course this function can become much more complex if you have to check a complicated form with a lot of radio buttons and things. The general idea remains the same, however: You go through the elements, check whatever you want to check and as soon as you find any mistake, you return false, after which the script stops and the form is not submitted.
Once you’ve found a mistake, you should notify the user of the problem. This used to be done by an alert, but nowadays you can generate error messages and insert them next to the form field.
Only at the very end of the script, when you have checked all elements and encountered no mistakes, you return true, after which the form is submitted.
Form methods and properties
November 6th, 2007 — adminJavaScript has a few built-in methods and properties for dealing with forms. Three of them are especially important:
You can submit a form by using the submit() method. To submit the first form on
the page, do
document.forms[0].submit()
Please note that when a form is submitted by JavaScript the onsubmit event handler
is never executed. To reset the form, do
document.forms[0].reset()
I assume, but have not tested, that the onreset event handler isn’t executed
either if you reset the form through JavaScript. Finally, you can change the ACTION of a form if you want to:
document.forms[0].action = ‘the_other_script.pl’;
This can come in very handily if a form has to be submitted to another script in some
cases.
Accessing the form elements
November 6th, 2007 — admin The form validation script needs to access the form in the HTML page to determine
what values the user has filled in. So first we have to enter the form by means of the Level 0 DOM.
The general syntax for accessing a form element is:
document.forms[number].elements[number]
When the page is loaded, JavaScript makes an array forms in which it puts all the forms that are on the page. The first form is forms[0], the second is forms[1] etc.
Each form has another array in which JavaScript puts all the elements in the form.
The first elements is elements[0], the second elements[1] etc. Every <input>, <select> and <textarea> is an element.
In some cases, it’s better to use the names of the forms and elements. In HTML, you have to give a name to each form and each element, like:
<form name=”personal” action=”something.pl” onsubmit=”return checkscript()”>
<input type=text size=20 name=name><input type=text size=20 name=address>
<input type=text size=20 name=city>
</form>
Now you can access these elements by:
document.personal.namedocument.personal.addressdocument.personal.city
The advantage of using names is that you can put all elements somewhere else in the page and still have a working script, while a script using numbers will have to be changed. After all, the input box city is document.forms[0].elements[2] in the example above, but when you suddenly put it at the top of the form, it becomes document.forms[0].elements[0] and you have to change the script.
When you start writing your own scripts using the code snippets below, it is always very important to know exactly how your form is built. To help you, I wrote a form printing script that
prints out the form structure for you.
Determining values
November 6th, 2007 — adminOf course, the most important thing is to find out what the user has filled in or checked in the form. At other times you might want to fill in something in the form.
Below are snippets of scripts that help you access form elements. All of them are meant to
send the user input to the variable user_input. After you’ve done that, you can check this value for whatever you want.
- Texts, textareas and hidden fields
- Select boxes
- Checkboxes
- Radio buttons
If you’d like to study a practical example, see the example form and script.
Texts, textareas and hidden fields
Very simple:
user_input = document.forms[0].text.value
where text is the name of the text field, textarea or hidden field. The value of this element gives the text, so we transfer it to user_input.
Writing is also possible:
document.forms[0].text.value = ‘The new value’;
Select boxes
Select boxes are simple too:
user_input = document.forms[0].select.value;
To change the selected option in a select box, you have to change its selectedIndex, like
document.forms[0].select.selectedIndex = 2;
Now the third option in the box is selected.
Old browsers
In old browsers, select boxes didn’t yet have a value property. Back then, this was the way to find the value of a select box:
var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value
First, we need to find out which option the user has selected. document.forms[0].select.selectedIndex gives us the number of the selected option. JavaScript has created an array options which contains all options of the select box. So we ask for the selected option in this array and take the value of it, which we transfer to user_input.
Checkboxes
Checkboxes need a slightly different approach. We already know their values, but want to know whether the user has checked them. The checked property tells us. It can have two values: true or false.
Now we do:
if (document.forms[0].checkbox.checked)
{
user_input = document.forms[0].checkbox.name
}
in which checkbox is the name of the checkbox. If the checkbox is checked, we take its name
(or its value, if you need that bit of data) and transfer it to user_input.
To check a checkbox, set its property checked to true:
document.forms[0].checkbox.checked = true;
Radio buttons
Unfortunately it’s not possible to see at once which radio button in a group the user
has checked. You need to go through all radio’s and see which one’s checked
property is true.
for (i=0;i<document.forms[0].radios.length;i++)
{
if (document.forms[0].radios[i].checked)
{ user_input = document.forms[0].radios[i].value;
}
}
where radios is the name of the group of radio buttons.
Note that document.forms[0].radios is an array filled with all radio buttons. Loop through all of them and see if it is checked. If one is, transfer the value of that radio button to user_input.
document.forms[0].radios.length gives the number of radio buttons. For each radio
button, we see if it is. To check a radio button, set its property checked to true:
document.forms[0].radios[i].checked = true;
JavaScript - Email Validation script
August 6th, 2007 — adminvar emailfilter=/^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i
function checkmail(e){
var returnval=emailfilter.test(e.value)
if (returnval==false){
alert(”Please enter a valid email address.”)
e.select()
}
return returnval
}
-
Unique Visitor
-
Subscribe Me
