By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,949 Members | 2,038 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,949 IT Pros & Developers. It's quick & easy.

Show/Hide text field

P: n/a
FP
I'm new to Java Script.
I'm displaying comments people have made. Below each persons' comment
I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would
display an empty text field below the comment with a spell check &
submit button. Clicking "Amend" would display the same buttons & text
field but pre-populated with the original comment.

Using Java Script how do I show / hide the text field in my list of
comments but have it as a form so that it can be sumitted?
How do I tell it to populate the text field or should I have a second
text field that is pre-populated and show it instead of the first text
field?

Jun 26 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
FP wrote:
I'm new to Java Script.
I'm displaying comments people have made. Below each persons' comment
I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would
display an empty text field below the comment with a spell check &
submit button. Clicking "Amend" would display the same buttons & text
field but pre-populated with the original comment.

Using Java Script how do I show / hide the text field in my list of
comments but have it as a form so that it can be sumitted?
Hi,

The easiest way to show/hide some part of the page (form or something else)
is using CSS.
Put the part you want to show/hide in a div, and change the
display-property.

<span
onClick="document.getElementById('myId').style.dis play=none">hide</span>

<span
onClick="document.getElementById('myId').style.dis play=block">show</span>

<div id="myId" style="display:block">
<input type="text" name="bla">
</div>

How do I tell it to populate the text field or should I have a second
text field that is pre-populated and show it instead of the first text
field?


I have no idea what you are asking here, sorry.

Regards,
Erwin Moller

Jun 27 '06 #2

P: n/a
FP
Erwin Moller wrote:
The easiest way to show/hide some part of the page (form or something else)
is using CSS.
Put the part you want to show/hide in a div, and change the
display-property.

<span
onClick="document.getElementById('myId').style.dis play=none">hide</span>

<span
onClick="document.getElementById('myId').style.dis play=block">show</span>

<div id="myId" style="display:block">
<input type="text" name="bla">
</div>

I tried your code and couldn't get it to work. I'm not familiar with
style sheets, nor Java. If possible I would like to do this without
CSS (less things to go wrong). Below is the exact code I tried, please
point out any errors, and keep in mind I'm new to this.
I tried merging your code with other posts I read, all without luck.
The "Span Hide" doesn't act as a button, the "Java Hide" acts like a
button but doesn't do anything.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function Show(){
document.getElementById( "myId" ).style.display = "block"; }
function Hide(){
document.getElementById( "myId" ).style.display = "none"; }
</script>

<BODY>
<span onClick="document.getElementById('myId').style.dis play=none">Span
Hide</span>
<span
onClick="document.getElementById('myId').style.dis play=block">Span
Show</span>

<input type="button" onclick="Show();" value="Java Show">
<input type="button" onclick="Hide();" value="Java Hide">

<div id="myId" style="display:block">>
<P>Test</P>
</div>

</BODY>
</HTML>

Jun 28 '06 #3

P: n/a
FP said the following on 6/28/2006 11:44 AM:
Erwin Moller wrote:
The easiest way to show/hide some part of the page (form or something else)
is using CSS.
Put the part you want to show/hide in a div, and change the
display-property.

<span
onClick="document.getElementById('myId').style.dis play=none">hide</span>

<span
onClick="document.getElementById('myId').style.dis play=block">show</span>

<div id="myId" style="display:block">
<input type="text" name="bla">
</div>

I tried your code and couldn't get it to work. I'm not familiar with
style sheets, nor Java. If possible I would like to do this without
CSS (less things to go wrong).


You can do it without CSS but CSS makes it a lot simpler. And, Java !=
Javascript.
Below is the exact code I tried, please
point out any errors, and keep in mind I'm new to this.
I tried merging your code with other posts I read, all without luck.
The "Span Hide" doesn't act as a button,
Because it's not a button.
the "Java Hide" acts like a button but doesn't do anything.

It does for me, it hides the div tag. It doesn't actually "hide" it, it
removes it from the flow of the page.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function Show(){
document.getElementById( "myId" ).style.display = "block"; }
function Hide(){
document.getElementById( "myId" ).style.display = "none"; }
</script>

<BODY>
<span onClick="document.getElementById('myId').style.dis play=none">Span
Hide</span>
='none' otherwise it tries to evaluate none as a variable and is
undefined (the error message tells you that)
<span
onClick="document.getElementById('myId').style.dis play=block">Span
Show</span>


ditto.
You hide an element one of two ways. You change it's visibility property
or you change it's display property. Which one you use depends on the
effect you want.

<script type="text/javascript">
function changeDisplay(elem,displayMode){
document.getElementById(elem).style.display = displayMode;
}

function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}
</script>

HTML:

<div id="div1" style="display: visible">Div 1</div>
<div id="div2" style="visibility: visible">Div 2</div>

<button onclick="changeDisplay('div1','block')">
Make Div1 Visible</button>
<button onclick="changeDisplay('div1','none')">
Make Div1 Hidden</button>

<button onclick="changeVisibility('div2','hidden')">
Make Div2 Hidden</button>
<button onclick="changeVisibility('div2','visible')">
Make Div2 Visible</button>
Have fun.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 28 '06 #4

P: n/a
Randy Webb wrote:
FP said the following on 6/28/2006 11:44 AM:
Erwin Moller wrote:
The easiest way to show/hide some part of the page (form or something
else) is using CSS.
Put the part you want to show/hide in a div, and change the
display-property.

<span
onClick="document.getElementById('myId').style.dis play=none">hide</span>

<span
onClick="document.getElementById('myId').style.dis play=block">show</span>
<div id="myId" style="display:block">
<input type="text" name="bla">
</div>

I tried your code and couldn't get it to work. I'm not familiar with
style sheets, nor Java. If possible I would like to do this without
CSS (less things to go wrong).


You can do it without CSS but CSS makes it a lot simpler. And, Java !=
Javascript.
Below is the exact code I tried, please
point out any errors, and keep in mind I'm new to this.
I tried merging your code with other posts I read, all without luck.
The "Span Hide" doesn't act as a button,


Because it's not a button.
the "Java Hide" acts like a button but doesn't do anything.

It does for me, it hides the div tag. It doesn't actually "hide" it, it
removes it from the flow of the page.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
function Show(){
document.getElementById( "myId" ).style.display = "block"; }
function Hide(){
document.getElementById( "myId" ).style.display = "none"; }
</script>

<BODY>
<span onClick="document.getElementById('myId').style.dis play=none">Span
Hide</span>


='none' otherwise it tries to evaluate none as a variable and is
undefined (the error message tells you that)
<span
onClick="document.getElementById('myId').style.dis play=block">Span
Show</span>


ditto.
You hide an element one of two ways. You change it's visibility property
or you change it's display property. Which one you use depends on the
effect you want.

<script type="text/javascript">
function changeDisplay(elem,displayMode){
document.getElementById(elem).style.display = displayMode;
}

function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}
</script>

HTML:

<div id="div1" style="display: visible">Div 1</div>
<div id="div2" style="visibility: visible">Div 2</div>

<button onclick="changeDisplay('div1','block')">
Make Div1 Visible</button>
<button onclick="changeDisplay('div1','none')">
Make Div1 Hidden</button>

<button onclick="changeVisibility('div2','hidden')">
Make Div2 Hidden</button>
<button onclick="changeVisibility('div2','visible')">
Make Div2 Visible</button>
Have fun.


Oops, sorry for none / 'none' confusion.
My bad.
Thanks for correcting Randy.

Regards,
Erwin Moller
Jun 28 '06 #5

P: n/a
FP
Randy Webb wrote:
<script type="text/javascript">
function changeDisplay(elem,displayMode){
document.getElementById(elem).style.display = displayMode;
}

function changeVisibility(elem,visibilityMode){
document.getElementById(elem).style.visibility = visibilityMode;
}
</script>

HTML:

<div id="div1" style="display: visible">Div 1</div>
<div id="div2" style="visibility: visible">Div 2</div>

<button onclick="changeDisplay('div1','block')">
Make Div1 Visible</button>
<button onclick="changeDisplay('div1','none')">
Make Div1 Hidden</button>

<button onclick="changeVisibility('div2','hidden')">
Make Div2 Hidden</button>
<button onclick="changeVisibility('div2','visible')">
Make Div2 Visible</button>

Thanks, this worked beautifully for me. I see the difference of just
hidding the text vs removing it completely from the page. A working
example is exactly what I needed.

='none' otherwise it tries to evaluate none as a variable and is
undefined (the error message tells you that)


This is going to sound like a silly question; when I loaded the page in
Safari I wasn't getting any errors. I'm hosting the page with the
built in Apache on OS X 10.3.9, do I turn on error reporting in Apache,
in Safari, or do I add some HTML code to do that?

the "Java Hide" acts like a button but doesn't do anything.


It does for me, it hides the div tag. It doesn't actually "hide" it, it
removes it from the flow of the page.


I finally figured out why my initial code, copied from somewhere,
wasn't working. Instead of;
"getElementById" I had "getEmementById".
I think I'm going to be able to sleep better tonight.

Jun 29 '06 #6

P: n/a
FP said the following on 6/28/2006 8:13 PM:
Randy Webb wrote:


<snip>
='none' otherwise it tries to evaluate none as a variable and is
undefined (the error message tells you that)


This is going to sound like a silly question; when I loaded the page in
Safari I wasn't getting any errors. I'm hosting the page with the
built in Apache on OS X 10.3.9, do I turn on error reporting in Apache,
in Safari, or do I add some HTML code to do that?


You have to turn it on in Safari, although I do not know how to do that.
the "Java Hide" acts like a button but doesn't do anything.

It does for me, it hides the div tag. It doesn't actually "hide" it, it
removes it from the flow of the page.


I finally figured out why my initial code, copied from somewhere,
wasn't working. Instead of;
"getElementById" I had "getEmementById".
I think I'm going to be able to sleep better tonight.


The problem with the original code you posted was none instead of 'none'
and no other errors. If your original had getEmementById then you fixed
it before you posted it.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 29 '06 #7

P: n/a
FP
Randy Webb wrote:
You have to turn it on in Safari, although I do not know how to do that.
Just thought I would share incase anyone else needs an answer to this.
Quit Safari, from the terminal window enter the command
defaults write com.apple.Safari IncludeDebugMenu 1
this adds a debug menu with some neat features as the right most menu
in Safari
The problem with the original code you posted was none instead of 'none'
and no other errors. If your original had getEmementById then you fixed
it before you posted it.


I could have sworn it had the error last night, but after staring at
the computer screen so much I'm starting to wonder if I wasn't seeing
things.

Jun 29 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.