MSFN Forums > Small Javascript Question

MSFN Forums > Coding, Scripting and Servers > Web Development (HTML, Java, PHP, ASP, XML, etc.)

colemancb

Dec 5 2007, 09:39 AM

Hey there...

Just fiddling around with an idea me and a buddy have, and what the site will require is users clicking a link, or a button, getting a prompt, and taking what the user entered and placing that data on the page after some modifications. Sounds simple, and I'm sure it is. But, in what I've read and tested out myself, everytime I use the document.write method, it overwrites the entire page instead of just adding on. After more reading, I thought that using the 'getElementbyID' and 'innerHTML' methods would solve my problem by placing the output inside a DIV, but no go. Anyone have any advice on this?

gunsmokingman

Dec 5 2007, 11:05 AM

QUOTE (colemancb @ Dec 5 2007, 05:39 PM)

I do not know if this is what you wanted but here is what it does.
1\ Text box to add text
2\ Submit button
3\ A Div that set to be hidden

If you press the submit button and the text box is empty it will say text needed message
If the text box has text in it and you press the submit button below the text box what
you have just type in will appear. Also the button text changes from submit to clear

Save As Demo_ShowText.html

QUOTE

CODE

<HTML></HEAD>
<TITLE>Demo - Show Text</TITLE>
<STYLE Type='text/css'>
  .Text1
   {
    Font-Family:verdana;
    Font-Size:8.05pt;
    Font-Weight:Bold;
    Color:#007373;
   }
</STYLE>
  <script LANGUAGE='JScript'>
  function ShowText()
   {
    if(DisplayText.style.visibility=="hidden")
    {
     if(TBox1.value=="")
     {
      alert("Please Input Some Text");
     }
     else
     {
      DisplayText.style.visibility=""
      DisplayText.innerHTML="<FONT CLASS='Text1'>"+
      "Your Input Was » "+TBox1.value+"</FONT>";
       Btn01.value='Clear'
     }
    }
    else
    {
     DisplayText.style.visibility="hidden";
     Btn01.value='Submit'
     TBox1.value=""
    }
   }
  </SCRIPT>
</HEAD><BODY>

  <INPUT Type='TextBox' ID='TBox1'
   Class='Text1'
   Style='Color:#000060;Margin-Right:2px;'>

  <INPUT Type='BUTTON' ID='Btn01'
   Class='Text1'
   Style='Height:21px;Width:63px;Color:#010101;'
   OnClick='ShowText()'
   value='Submit'>

  <DIV ID='DisplayText'
   Style='visibility:hidden;position:absolute;Top:48;Left:48;'></DIV>
</BODY></HTML>

colemancb

Dec 6 2007, 02:06 AM

I appreciate the help, but I don't think I explained it well enough. I have some code below that basically does what I want, however, not exactly.
What it will do is prompt the user, and print a string out on the page without overwriting everything on the page which is good, but I need the script to ADD to whatever is already on the page (so essentially, they could click on the 'google' image again, repeat the process, and a new line with their string would appear below the one created before it.

CODE

<html>
<head>
<script type="text/javascript">
function vaibhav()
{
var name=prompt("Please enter your name","Harry Potter")
if (name!=null && name!="")
{
var document.createTextNode("Hello "+name+"!! How are you today??")
var tname = document.getElementById("name")
while (tname.firstChild) {
tname.removeChild.firstChild
}
tname.appendChild(text);
}
}
</script>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<div id="name"></div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="vaibhav()" />
</body>
</html>

gunsmokingman

Dec 6 2007, 01:36 PM

I could not get the code you posted to work. So I re wrote a new one for you to try.

QUOTE

CODE

<HTML>
<HEAD>
<TITLE>Demo-Display User Input Text</TITLE>
<STYLE Type='text/css'>
  BODY
   {
    Font-Size:8.95pt;
    Font-Weight:Bold;
    Font-Family:segoeui,helvetica,verdana,arial,Poor Richard;
    Color:#FFFFFF;
    BackGround-Color:#000000;
   }
  .B1
   {
    Cursor:Hand;
    Width:69pt;
    Height:15pt;
    Font-Size:8.05pt;
    Font-Weight:Bold;
    Font-Family:segoeui,helvetica,verdana,arial,Poor Richard;
    Color:#005252;
   }
</STYLE>
<script type="text/javascript">
var Var1=""
//-> Open And Closes Input Box And Buttons
   function ShowInput() {if(InPut.style.visibility=="hidden")
    {InPut.style.visibility="";/* Show */}
     else
    {InPut.style.visibility="hidden";/* Close */}}
//-> Check The Inputbox Values
   function CheckInput() {if(MyName.value=="")
    {alert('Error'+'\t'+'No User Input Detected');}
      else
    {Var1+="Hello "+MyName.value+"!! How are you today??<BR>"
     DisplayTheText();}}
//-> Displays The Text
   function DisplayTheText(){Var1=Var1; Show.innerHTML=Var1+'<HR>';}
</SCRIPT>
</HEAD>
<BODY>

<DIV id="InPut"
Style='visibility:hidden;position:absolute;top:16;Left:128;'>

<INPUT Type='TextBox' ID='MyName' NAME='MyName' Width='128'><BR>

<INPUT Type='Button' ID='TBtn01' Class='B1'
  OnMouseOver='this.style.color="#204080"'
  OnMouseOut='this.style.color=""'
  Value='Add Info' OnClick='CheckInput()'><BR>

<INPUT Type='Button' ID='TBtn02' Class='B1'
  OnMouseOver='this.style.color="#204080"'
  OnMouseOut='this.style.color=""'
  Value='Clear TextBox' OnClick='MyName.value=""'><BR>

<INPUT Type='Button' ID='TBtn03' Class='B1'
  OnMouseOver='this.style.color="#204080"'
  OnMouseOut='this.style.color=""'
  Value='Clear Display' OnClick='Show.innerHTML=""'>
</DIV>


<TABLE>

<IMG src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="ShowInput()" />

<DIV Style='Text-Align:Center;'>Display User Input Text<HR></DIV>

<DIV ID="Show" ReadOnly=True></DIV>
</TABLE>

</BODY>
</HTML>

colemancb

Dec 7 2007, 05:30 PM

This works perfectly, thank you so much!

gunsmokingman

Dec 7 2007, 09:27 PM

Glad I could help and your welcome.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.