Show/Hide text field

F

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?
 
E

Erwin Moller

FP said:
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?
Click to expand...

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.display=none">hide</span>

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

<div id="myId" style="display:block">
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?
Click to expand...

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

Regards,
Erwin Moller
 
F

FP

Erwin said:
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.display=none">hide</span>

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

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


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.display=none">Span
Hide</span>
<span
onClick="document.getElementById('myId').style.display=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>
 
R

Randy Webb

FP said the following on 6/28/2006 11:44 AM:
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).
Click to expand...

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,
Click to expand...

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


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.display=none">Span
Hide</span>
Click to expand...

='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.display=block">Span
Show</span>
Click to expand...

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.
 
E

Erwin Moller

Randy said:
FP said the following on 6/28/2006 11:44 AM:

You can do it without CSS but CSS makes it a lot simpler. And, Java !=
Javascript.


Because it's not a button.



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


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


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.
Click to expand...

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

Regards,
Erwin Moller
 
F

FP

Randy said:
<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>
Click to expand...


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)
Click to expand...

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?



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

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.
 
R

Randy Webb

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


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?
Click to expand...

You have to turn it on in Safari, although I do not know how to do that.
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.
Click to expand...

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.
 
F

FP

Randy said:
You have to turn it on in Safari, although I do not know how to do that.
Click to expand...

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.
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I hide the modal after 5 seconds? 4
Set value after clicking in field 11
Show/Hide HTML Table Columns using SELECT option 1
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
How can I hide a div using an event listener on multiple checkboxes? 6
read get variables and show/hide div 4
How to add dropdown selected data to table using jquery 2
show/hide text, but more... 4

Members online

Total: 29 (members: 1, guests: 28)
Robots: 285

Forum statistics

Threads
473,767
Messages
2,569,570
Members
45,045
Latest member
DRCM

Latest Threads

Top