Javascript variables for forms

[DanielWhite]

This is my code:

 

  <FORM action='testform.php' method='POST'>

<script language='JavaScript'>
HeightValueHeader = document.getElementById('HeaderID').clientHeight;
  HeightValueMain = document.getElementById('ContentID').clientHeight;
  HeightValueFooter = document.getElementById('FooterID').clientHeight;

document.write('<textarea id='TestVar' name='TestVar'>' + HeightValueHeader + '</textarea>');

</script>


<input type='submit' name='Submit' value='Submit />
</form>

 

I'm trying to post the javascript variable into a form so that I can retrieve it via PHP on the next page but I can't even get javascript to write the text area (also tried <input....)

 

It only shows the submit button.

 

I don't want to post the variable to the URL because I don't want users to change it.

 

Could anyone help me please?

 

Thank you,

Daniel White

[rhodesa]

Try changing this line:

	document.write('<textarea id="TestVar" name="TestVar">' + HeightValueHeader + '</textarea>');

 

Edit: you will also have a problem cus the textarea needs to be inside the form...code coming your way in just a sec

[rhodesa]

<form id="theform" action="testform.php" method="POST">
  <textarea id="TestVar" name="TestVar"></textarea>
  <input type='submit' name='Submit' value='Submit />
</form>
<script language='JavaScript'>
  HeightValueHeader = document.getElementById('HeaderID').clientHeight;
  HeightValueMain = document.getElementById('ContentID').clientHeight;
  HeightValueFooter = document.getElementById('FooterID').clientHeight;
  document.getElementById('TestVar').value = HeightValueHeader;
</script>

[DanielWhite]

Nopers the above code makes this happen:

 

 

and it's not passing the variable over either.

 

 

Including the javascript inside the form tag makes the same problem.

Putting the javascript before the form won't pass the variable either but does not produce the error above.

[DanielWhite]

To solve the above problem I have to add a

 

'

 

after the submit value.

 

HOWEVER!

 

The problem still is that I can't pass the variable on through the form.

[rhodesa]

Let's back up a step here. What are you trying to accomplish with:

  HeightValueHeader = document.getElementById('HeaderID').clientHeight;
  HeightValueMain = document.getElementById('ContentID').clientHeight;
  HeightValueFooter = document.getElementById('FooterID').clientHeight;

[DanielWhite]

I want to get the value of the height of 3 cells within a table:

 

<table width='680' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td id='HeaderID' width='226' valign='top'>$headerleft </td>
    <td width='228' height='30' valign='top'>$headercenter</td>
    <td width='226' height='30' valign='top'>$headerright</td>
  </tr>
  <tr>
    <td id='ContentID' colspan='3' valign='top' width='680'>$topright<br>$maincontent<p></td>
  </tr>
  <tr>
    <td id='FooterID' width='226' valign='top'>$footerleft</td>
    <td width='228' height='30' valign='top'>$footercenter</td>
    <td width='226' height='30' valign='top'>$footerright</td>
  </tr>
</table>

 

I then want to put the value of the three cell heights using JavaScript into a form so that when it is submitted to the next page PHP will pick up the fields using the $_POST['???'] variable and incorporate then into the new page.

 

I know that this code works:

 

  <script language='JavaScript'>
  HeightValueHeader = document.getElementById('HeaderID').clientHeight;
  HeightValueMain = document.getElementById('ContentID').clientHeight;
  HeightValueFooter = document.getElementById('FooterID').clientHeight;
   window.location.href = 'testform.php?header=' + HeightValueHeader + '&main=' + HeightValueMain + '&footer=' + HeightValueFooter;
</script> 

 

But I don't want the values to be included in the URL because users will be able to change them. I need the values to be wrote into a text area/input box so that they can be collected when the form submits.

 

 

[rhodesa]

Got it, try this:

 

<table width='680' border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td id='HeaderID' width='226' valign='top'>$headerleft </td>
    <td width='228' height='30' valign='top'>$headercenter</td>
    <td width='226' height='30' valign='top'>$headerright</td>
  </tr>
  <tr>
    <td id='ContentID' colspan='3' valign='top' width='680'>$topright<br>$maincontent<p></td>
  </tr>
  <tr>
    <td id='FooterID' width='226' valign='top'>$footerleft</td>
    <td width='228' height='30' valign='top'>$footercenter</td>
    <td width='226' height='30' valign='top'>$footerright</td>
  </tr>
</table>
<form id='theform' action='testform.php' method='post'>
  <input type='hidden' name='header' />
  <input type='hidden' name='main' />
  <input type='hidden' name='footer' />
  <input type='submit' name='Submit' value='Submit' />
</form>
<script type='text/javascript'>
  Form = document.getElementById('theform');
  Form.header.value = document.getElementById('HeaderID').clientHeight;
  Form.main.value = document.getElementById('ContentID').clientHeight;
  Form.footer.value = document.getElementById('FooterID').clientHeight;
</script>

[DanielWhite]

Wow you're brilliant!  Thank you so much :-)