Tweet
How to display value hidden field?
I have a hidden field whose value is a text string, "xyz". I want to write the value to the page so that the user can see it but not edit it. Can't I just use document.write(form.field.value)? Why isn't it working?
-
-
Not a very precise problem/error description, but I try:
From what you wrote I suspect three sources of wrong behaviour of your script. First, it could be that you have an error at referencing the form field - a slight typo maybe.
Second: You try to call on the value of that form field before it has been rendered by the browser. For instance, if you have that code snippet above in your <head> element, it will fail. You'll have to wait until the page has been loaded completely, so that the document object structure is exposable to javascript. The onload eventhandler is helpful for this task.
Third: document.write() does not what it should as it rewrites the whole contents of the page.
I would advice you use that the following code to show you the hidden field's value in a div (supposes you use modern browsers):
<body onload="document.getElementById('sign').innerHTML = document.form.field.value">
<div id="sign">...</div>De gustibus non est disputandum. -
or you could write the value into a text field as opposed to hidden and use onFocus="blur()" so they cant edit it?Comment
-
A thousand apologies for not being more clear. There is no error, it's just that nothing appears on the page. The rest of the page works fine.
As for making a non-editable text field, thanks for the suggestion, but the text needs to be just part of the page. The only reason it's in a field at all is because it needs to be passed. I could hard code the text twice, but I'm trying to avoid that.
I think mordred is right on the money the second suggestion that the value has not been rendered. So, now I'm trying to figure out the recommended code. I'm new at this, so please excuse my ignorance (but that's why we have forums, right?).
Can you help me decipher?
<body onload="document.getElementById('sign').innerHTML = document.form.field.value">
This means I am assigning the value of my field to the div called "sign", right?
So I put
<div id="sign">...</div>
where I want to the text string to appear? If that's right, then what do I put in the "..."?Comment
-
The key detail here is whether the form appears in the page above the source of the text, or below it. If it's above, as simple as this:
If below, you'll need to insert it after the fact; post if that's the case.Code:<html> <head> <title>untitled</title> </head> <body> <form> <input name="secret" type="hidden" value="xyz"> </form> <p style="font:200 14px helvetica;color:navy;"> I want to write the value to the page so that the user can see it but not edit it: <script type="text/javascript" language="JavaScript"> document.write('<strong>' + document.forms[0].secret.value + '</strong>'); </script> </p> </body> </html>Comment
-
WOO HOO!!!!!
That did it!!!!!
It was the magic "forms[0]" that did it. Can you tell me what that means exactly?
THANK YOU THANK YOU THANK YOU
Comment
-
Actually, I would also love to know how to get the value in the header so I can assign it to a variable. That would fix a kludge I have elsewhere. I tried the document.forms[0].field.value, but obviously that didn't work...
THANKS AGAIN!!!Comment
-
[window.] -----> implied
document -----> the loaded page
forms[0] -----> the first form on the page (only one, here)
secret -----> an element in that form named 'secret'
value -----> its value (character string)
As mentioned, you can reference the form element, since it already exists (it was created in the lines above).
Oops, just read your new thingy; just for the record, it helps if you lay all your cards on the table as soon as possible, since different requirements call for different solutions. Anyway.....
<script type="text/javascript" language="JavaScript">
var secretVal = document.forms[0].secret.value;
document.write('<strong>' + secretVal + '</strong>');
</script>
Now it's in secretVal. OK?Last edited by adios; Jul 10, 2002, 04:28 PM.Comment
-
Well, if I put ALL my cards on the table, you guys would be writing all my code!!!! ha ha ha
Seriously, though, again my apolgies for not being clear. I was just referring to your previous offer of how to extract the value when the source is above the form.
The code you suggest results in the variable being undefined, because I need to set the variable in the header, before the form.
This is beyond the scope of my original question, which using "forms[0]" instead of just "form" resolved (though I still don't understand why). I should probably have put it in a separate thread.
So sorry...I'm still learning.Comment
-
dremmers..stop apologizing, or I'll slap you
We'll finish this (easy) if you explain this first:
If you're using server-side processing to output the hidden field's value to the form HTML, the browser won't know about it until it parses the file down to where the form HTML actually is. Why not just write it to the header as well (to a JS variable)?I need to set the variable in the header, before the form.
adios
forms[] collection: http://www.xs4all.nl/~ppk/js/forms.html#accessLast edited by adios; Jul 10, 2002, 10:16 PM.Comment
-
OK, this is not an apology, this is a statement:
I AM AN IDIOT!!!!
I was thinking that the variable needed to be defined in the header because that's where the function IS. Clearly, I just need to set the variable before the function is CALLED.
All is well. Thanks everyone for all your help!
Adios, thank you for the link!!!
Comment
-
forms[0] ... magic! thanks!!Comment
Comment