Jump to content
xisto Community
h1dd3n

Help Writing An Html Code (onclick Open Something)

Recommended Posts

hi,I am new in web development i want to make a page in which there are few buttons and on click of each button there is some hidden text field which becomes visible and user can enter the text he wish to in it. how can i ?

Share this post


Link to post
Share on other sites

I have posted a few things that could help me about that stupid Cpanel :D I am still looking what icon I click on to make the website!! In my one day of being here. I am kinda disapointed. I wish that the shoutbox was working :) Wahaa :P

Share this post


Link to post
Share on other sites

hi,
I am new in web development i want to make a page in which there are few buttons and on click of each button there is some hidden text field which becomes visible and user can enter the text he wish to in it. how can i ?



ok, i have some time let me have a try
// test.html<html> <head>	<title>just a demo</title>	<style type="text/css">	/*<![CDATA[*/		#div1 {			display:none;		} 		#div2 {			display:none;		}	/*]]>*/	</style>	<script type="text/javascript">	//<![CDATA[	function show(id) {	  if(id == 1) {		  document.getElementById('div1').style.display='block';		  document.getElementById('div2').style.display='none';	  } else {		  document.getElementById('div2').style.display='block';		  document.getElementById('div1').style.display='none';	  }	}	//]]>	</script> </head>  <body>	   <div id="div1">		 <input type="text" name="txt1" value="here is text1 content" />	   </div>  		<div id="div2">		 <input type="text" name="txt2" value="here is text2 content" />	   </div>	 <input type="button" value="button1" onclic="show(1);" />  	 <input type="button" value="button2" onclic="show(2);" />     </body></html>

Share this post


Link to post
Share on other sites

INTO HEAD:

   <script type="text/javascript">	 function show_buttons(show) {			   if (show == 'content_A') {				   document.getElementById('content_B').style.visibility='hidden';				   document.getElementById('content_A').style.visibility='visible';				} else {				   document.getElementById('content_A').style.visibility='hidden';				   document.getElementById('content_B').style.visibility='visible';				}	  }   </script>

INTO BODY:

<input type="button" onclick="show_buttons('content_A');" value="Show A">   <input type="button" onclick="show_buttons('content_B');" value="Show B"><input type="text" value="A" id="content_A" style="visibility: hidden"><input type="text" value="B" id="content_B" style="visibility: hidden">

Both will give different results. Mine will reserve space on the page for text fields whereas derickkoo's won't. When a user displays his the content on the page will move down slightly - or so I believe. Try them both out.

NB:

<input type="button" value="button1" onclic="show(1);" />  <input type="button" value="button2" onclic="show(2);" />  

Should read:

<input type="button" value="button1" onclick="show(1);" />  <input type="button" value="button2" onclick="show(2);" />  

Share this post


Link to post
Share on other sites
How to make it 3Help Writing An Html Code (onclick Open Something)

Hi,

I am having some problems with this, the following code works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html xmlns="http://www.w3.org/1999/xhtml/;><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--        #div1 {            display:none;        }        #div2 {            display:none;        }--></style>		<script type="text/javascript">    function show(id) {      if(id == 1) {          document.GetElementById('div1').Style.Display='block';          document.GetElementById('div2').Style.Display='none';       } if(id == 2) {	  document.GetElementById('div2').Style.Display='block';          document.GetElementById('div1').Style.Display='none';	   }    }</script></head><body>
<input type="button" value="button1" onclick="show(1);" /> &nbsp;<input type="button" value="button2" onclick="show(2);" /> &nbsp;<div id="div1"><input type="text" name="txt1" value="here is text1 content" /></div>  <div id="div2"><input type="text" name="txt2" value="here is text2 content" /></div></body></html>

But when I try to make 3 div boxes and 3 buttons it fails miserably! Even the first 2 buttons stop working! The code I am using goes like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;<html xmlns="http://www.w3.org/1999/xhtml/;><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--        #div1 {            display:none;        }        #div2 {            display:none;        }	#div3 {            display:none;        }--></style>		<script type="text/javascript">    function show(id) {      if(id == 1) {          document.GetElementById('div1').Style.Display='block';          document.GetElementById('div2').Style.Display='none';	  document.GetElementById('div3').Style.Display='none';       } if(id == 2) {	  document.GetElementById('div2').Style.Display='block';          document.GetElementById('div1').Style.Display='none';	  document.GetElementById('div3').Style.Display='none';      } if{id == 3} {	  document.GetElementById('div3').Style.Display='block';          document.GetElementById('div2').Style.Display='none';	  document.GetElementById('div1').Style.Display='none';	  }    }</script></head><body>
<input type="button" value="button1" onclick="show(1);" /> &nbsp;<input type="button" value="button2" onclick="show(2);" /> &nbsp;<input type="button" value="button3" onclick="show(3);" /> &nbsp;<div id="div1"><input type="text" name="txt1" value="here is text1 content" /></div>  <div id="div2"><input type="text" name="txt2" value="here is text2 content" /></div><div id="div3"><input type="text" name="txt3" value="here is text3 content" />
</div></body></html>

Also is there a way to put a default div box on show when the page is first loaded but is then hidden when a button is pressed?

Cheers

Tom

 

Keywords: php onclick tutorial

Share this post


Link to post
Share on other sites
dynamic add buttons in htmlHelp Writing An Html Code (onclick Open Something)Hi,I want a dynamic add button in html code so that when I click on it, it will dispay a text box...Please help..-reply by antika

Share this post


Link to post
Share on other sites

Just stick to this simple logic, when you wan a box to appear, set the style to "display:none", whether it's dynamic or manual set. If you want a box to be shown as default, set the style to "display:none", then when you click a button to show the box, use javascript onclick function to set it to "display:block". Same goes for you textbox.

Example for click to display a text box"

<script type="text/javascript">function showbox() {document.getElementById('box1').style.display = 'block';}</script><div id="box1"><input type="text" /></div>

Share this post


Link to post
Share on other sites
help with html Help Writing An Html Code (onclick Open Something)

 friends I am very new to html I am finding adding image to the page difficult I know the code is easy but I have tried many images but the pic does not come when I open the browser it shows a broken image. So Please help 

-question by sudhi

Share this post


Link to post
Share on other sites

hey I need to write codes that converts from farenheit to celsius and celsius to farenheit and I have to have two button and when the user clicks on one it supposed to give the farenheit and when he clicks on the other one it gives the degree celsius... Also the user has to enter the degree... I am struggling with that

Share this post


Link to post
Share on other sites

You need to first determine the formula that converts between the 2. I guess there's alot of script or formula out there by using google. Then use mathematical formula in javascript to convert the 2 then output the result using innerHTML.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.