News!

Graphic Design Web Design Multimedia Design Web Hosting SEO Contact Us About Us FAQ Site Map

Latest Graphics Design! (2009-07-22)

Sacramento, CA, USA

Join the Why Not Design e-newsletter & we'll discount your first design purchase.
Get 20% OFF design services!

How to set form field values using JavaScript

Setting form field values from other values with javascript

*** BEFORE you do any of the following, it is ALWAYS a good idea to make a COPY of the file you are going to edit ***

1. The #1 thing you MUST know is that the NAME="yourVariableName" of each form field value you want to use in your script CANNOT contain any of the following or it simply WILL NOT WORK...

a hyphen (-)
a number (1,2,3,4,5,6,7,8,9,0)
an underscore (_)
any punctuation (, . ! ? ; : ' etc.)

2. We reccommend you use a naming scheme similar to ours to keep things in order and to make logical sense of your variable names and function names...

function names like: doThis(), doThat(), validateThisThing()
form field names like: firstName, lastName, myHomeAddress, myCellPhone
variable names (if you use them) like: varOne, price, grandTotal, salesTax

3. Here is our sample code


<html>
<head>
<title>sample</title>

<SCRIPT TYPE="text/javascript">
<!-- 
function replicate() {

// Written by www.WhyNotDesign.com in 2007, KEEP this line and you're FREE to copy
// **** IMPORTANT, this script cannot have form field names with hyphens (-) in them!!! **** 

	if (document.myform.checkboxOne.checked == false) {
		document.myform.addressTwo.value = '';
		document.myform.addressTwo.focus();
		return;
	} else if (document.myform.checkboxOne.checked && document.myform.addressOne.value != '') {
		document.myform.addressTwo.value = document.myform.addressOne.value;
		document.myform.addressTwo.focus();
		document.myform.addressTwo.select();
		return;	
	} else {
		alert("We cannot replicate the data because some info is missing above");
		document.myform.checkboxOne.checked = 0;			
		document.myform.addressOne.focus();	
		return;
	}
}
//-->
</SCRIPT>
</head>

<body>
In your HTML document you need a form with the correctly named fields, and the form must correctly call the replicate() function.

<form name="myform" class="body" onsubmit="return someJavascriptValidation()" action="" method="post">
<p>Address #1 : <input name="addressOne" size="15" value=""></p>
<p>Use Same Address as above : <input type="checkbox" name="checkboxOne" onchange="replicate()" value=""></p>
<p>Address #2 : <input name="addressTwo" size="15" value=""></p>
</form>

</body>
</html>

4. Once you have everything in place, it should function like this...

We really hope this has helped SOMEONE :-)

If it has please drop us a note at

Graphic Design : Web Design : Multimedia Design : Web Hosting : SEO : About Us : FAQ : Site Map : Home