View Full Version : Taking value from another form element on same page

Sep 14th, 2007, 10:42 AM
That title might not be too clear...but here's the idea.
I'm not very familiar with javascript, and I need a bit of help.

I have 2 forms on one page. I need the second form to take a couple of values from the first form and store it as its own hidden values. So, for example, I have this code:

<form method="post" action="submit.php" name="form1">

<input type="text" name="title" size="42" maxlength="40" value="title" />
<textarea name="content" rows="20" cols="70">Content</textarea>


<form method="post" action="submitted.php">

<input type="hidden" name="title" value="form1.title.value" />
<input type="hidden" name="idea" value="form1.content.value" />
<input type="submit" name="submit" value="Submit Idea"/>


I know the simple solution would be to make it all one form, but the code is actually a good bit more complicated that this shows, and both forms are necessary.

I'm just wondering if there's a way to take the values from the first form and insert them into the hidden inputs of the second. Right now I have form1.title.value and form2.content.value written in the places that I need those values. However, that javascript syntax does not copy the desired value over. Is there anyway to achieve what I am attempting?

Thank you.

Sep 14th, 2007, 12:43 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<form method="post" action="submit.php" name="form1">
<p><input type="text" name="title" size="42" maxlength="40" value="My title" /></p>
<textarea name="content" rows="20" cols="70">My Content</textarea>
<form method="post" action="submitted.php" name="form2">
<input type="hidden" name="title" />
<input type="hidden" name="idea" />
<input type="submit" name="submit" value="Submit Idea" disabled="disabled" />
<p><input type="button" value="Test Form2 Values" onclick="testValues();" /></p>
<script type="text/javascript">
function testValues()
document.form2.title.value = document.form1.title.value;
document.form2.idea.value = document.form1.content.value;
alert("document.form2.title.value = " + document.form2.title.value);
alert("document.form2.idea.value = " + document.form2.idea.value);

Sep 14th, 2007, 08:27 PM
Thanks a lot. It works beautifully.