4thorder(TM) - Code Snippets and Full Scripts

[ JavaScript ] Passing variables into a form field using JavaScript (without leaving page)

Basic Description:

It is often useful to pass variables to form fields (for example text or hidden) on the same page thus making them accessible to other languages such as ASP, Cold Fusion, PHP or the like. This can be easily accomplished using a simple JavaScript function where one BIG benefit is that there is no need to leave the page!

Note: The following assumes that you are familiar with HTML form elements.

Here is the code in its entirety (you can download the code below):
<html>
<head>
<title>4THORDER(TM) - Passing variables into a form field using JavaScript</title>
<script language="JavaScript">
// pass variable to field
function passit(str)
{document.YOUR_FORM_NAME_HERE.YOUR_FIELD_NAME_HERE.value=str}
</script>
</head>
<body>
<a href="javascript:passit('variable passed')">Click to pass variable to form field</a>
|
<a href="javascript:passit(' ')">Clear field and try again</a>
<br>
<form name="YOUR_FORM_NAME_HERE">
<input type="text" name="YOUR_FIELD_NAME_HERE">
</form>
</body>
</html>

Lets take this apart to see how it works.

Within the <body> tag:
First a form is needed in the body. This will be our "target" when passing a variable.
Note: The tag attributes are stripped down to the bare essentials to simplify explanation of the code. That is, you will need to add additional attributes to the tags below to accommodate for your particular situation. Furthermore, keep in mind that this does not have to be a "text" type input element. You could, for example, make it "hidden" so the user does not see the element.

Here is the form code:
<form name="YOUR_FORM_NAME_HERE">
<input type="text" name="YOUR_FIELD_NAME_HERE">
</form>

Also required within the body are two links. One to pass the variable and another to clear the field for passing once again:
<a href="javascript:passit('variable passed')">Click to pass variable to form field</a>|<a href="passit(' ')">Clear field and try again</a>

Notice that the anchors "<a>" href attribute contain the same function call to the JavaScript routine "passit". The value contained within single quotes will be passed to the function. This is the value that we wish to pass to the form input element. Therefore, in this case when the user clicks the link to pass a variable, 'variable passed' is sent to the function. Likewise, to clear the field '' (or blank) is passed to the function.

Note: There are other ways of calling a function other than using an anchor href, however, that explanation is beyond the scope of this snippet. If you would like to see how, leave a comment below and a snippet will be provided.

Within the <script> tag is the function:
function passit(str)
{document.YOUR_FORM_NAME_HERE.YOUR_FIELD_NAME_HERE.value=str}

Here, the JavaScript function is setup to do the passing.

What happens when the user clicks "Click to pass variable to form field"?.

The aforementioned anchors call the passit('value to be passed goes here') function. Once activated, the value that is passed to the function is then "given" (my term) to the input field.

Note: The value of "str" also does not have to be a string. It can also be a number for example. The passit function will then look like this: passit(2) where 2 can be whatever number you wish to pass. Notice that there are no quotes around the number indicating that the data type is a number not a string.

Now onto the interesting part:
The "document.YOUR_FORM_NAME_HERE.YOUR_FIELD_NAME_HERE.value=str" line of the code makes the value of the input form element named "YOUR_FIELD_NAME_HERE" equal to the value that was passed to the function (in this case "variable passed").
Notice that there is also a reference to the form in this code. This is required to reference which form the element exists in.

Here is a detailed explanation on how the left hand side of the "=" sign works:
From left to right:
document - the entire document (webpage)
YOUR_FORM_NAME_HERE - the specific form
YOUR_FIELD_NAME_HERE - the specific form element
value - the value attribute of the input form element.

I like to think of the furthest left as the outer most view looking at the webpage code. As you move to the right in the equation - the more narrow the view becomes (Hey! works for me). So, the "document" is the most general reference, while the input form element is the most specific and "value" is the attribute of the input element that we wish to change.

Another way of looking at this is :
[where is the element to be changed?].[what requires changing?] = [what does it change to?]

In other words, this line of code is the key to passing the variable. Whatever is on the right hand side of the equation gets passed to the value attribute of the element that is referenced on the left.

Finally, to clear the value, '' (or blank) is passed to the same function.

In summation, we have used a form and form input element, two links, and a single line of JavaScript code contained within a function to pass and clear the value of an input form element.

Please leave a comment if you have a question or suggestion.

Happy Coding!

Mike

Features List:

N/A

Demonstration of Code:

Click to pass variable to form field | Clear field and try again

Code considerations:

Tested in: