473,387 Members | 1,899 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Show/Hide text field

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
7 29108
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected...
3
by: Miguel Dias Moura | last post by:
Hello, I have 2 tables in a web page. I want to show first table and hide second when the URL parameter result=ok. And of course the oposite when result=notok. How to do this?
7
by: Paul Lautman | last post by:
Hi y'all, I found the toggle function (shown below) and applied it to a form of mine. It works fine in IE, but in Firefox it appears to fail on the eval lines. I've searched around but I can't...
4
by: Dan | last post by:
Hi, I know how to show and hide text, but I want to make it so that the page shifts up when I hide my text. Right now with the simple code, it only leaves a blank space. Thanks, Daniel
2
by: JLC | last post by:
Hi, I am creating a page in asp.net that has a checkbox and a textbox. When the checkbox is checked I want the textbox to become active and show text. If the checkbox is unchecked, I would like...
2
by: saijin | last post by:
I've been trying to implement simple lines of XML into my flash file created with ActionScript 3.0, but things seem not to be working. All I want to do is to load an external XML file (data.xml),...
1
by: stewdizzle | last post by:
I have a from with three radio buttons (same group) and three text boxes. The radio buttons give the user a choice of uploading one, two, or three images. Currently, I have the text boxes load as...
0
by: jholland13 | last post by:
Hi, I manage a Access 07 dbase as part of my job. I am not very good at programming, no formal training. Most things it does by code I found snippets and modified them. Something I want to do is...
4
by: Shinee Nag | last post by:
What I am trying to do is add first text field right after a dropdown menu only if the user selects a first option, when a user selects second option then second text field is opened I am new to...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.