View Full Version : Passing variables from forms to scripts

02-01-2004, 01:15 PM
I'm having trouble passing variables from forms to scripts on the same page.

<form action="inputpage.htm" name="inputform"

<input type="text" name="head1" value="Headline" />
<br />
<input type="text" name="text1" value="Some text" >

<br />
<input type="text" name="text2" value="More text." />

<input type="button"

<script type="text/javascript">
function readform()
document.write("<h1>"+head1+"</h1> \
<p>"+text1+"</p> \


The script errors out, saying the form values such as head1, etc are not defined. Okay, but even using techniques from http://webreference.com/js/tips/000811.html , I can pass a form value to a script, such as
alert(otherElement.form.elements[1].value); or
document.forms[0].elements[0].value = "thank you"; but not to a variable such as head1.

The same code written as
var head1=otherElement.form.elements[1].value;
var head1=document.forms[0].elements[0].value
only produces <h1>undefined</h1>

I know I could accomplish this with cookies or PHP or by parsing a URL location string, but is any of that really necessary?

02-01-2004, 01:30 PM
No, there is no need to parse the URL with php.
You cannot access the variables in the form using the name of the input only. The notation you want is:

var head1 = document.inputForm.head1.value
var text1 = document.inputForm.text1.value
var text2 = document.inputForm.text2.value

Then you have filled javascript variables with values from the form elements. Following that you document.write should work fine, leave that as it is.

Also, you aren't actually submitting your form to input page.htm when that button is clicked, so that is a rather abstract thing to write, although completely harmless.
Hope this helps you.

02-02-2004, 03:59 AM
Thanks, Ben. That's much better.

I changed to <form name="inputForm">
and inserted
<script type="text/javascript">
var head1 = document.inputForm.head1.value
var text1 = document.inputForm.text1.value
var text2 = document.inputForm.text2.value
just before the readform() script.

But I still have bugs. In IE 6.0, typing new values into the form and clicking Go always displays the default form values. I can't get the document.write to show the new values. In Mozilla/5.0 Firebird 0.7, I can get the values to change, but only after hitting my Back button and clicking Go a second time. (I get an hourglass but at least the text displays.)

I moved the variable declaration all around my page, but it doesn't seem to work any better anywhere I put it.

02-02-2004, 04:41 AM
It is because you only access the field values once not as you click the button. Put them inside the readform() function. Also do not use document.write statements after the page has loaded. Doing so will replace the current page. What do you really want to do with the values of the fields?

02-02-2004, 05:33 AM
That's what I needed, Glenn. I thought I had already tried that, but it works now. Yes, I guess I do want to replace the current page with a new page built from the field values. But that means I need to put the entire content of the new page into the readform() function... Well, I plan to make it a little simpler for myself by using javascript includes for the boilerplate headings, menus and footers.