HTML question #2

  • 9 Replies
  • 2256 Views
?

spacemanjones

  • 281
  • +0/-0
  • Magic pushes earth
HTML question #2
« on: September 30, 2008, 03:01:57 AM »
Well since my last question was answered perfectly I am coming for help again.

I am trying to figure out how to have a text box in one part of the page that once it is filled out the information shows up in another part of the page.

So I would have a box let’s say on the left side, when I put something in it, the numbers or letters will automatically show up on the top right. I just need to know what code will grab that data.

Thanks!

*

Parsifal

  • Official Member
  • 36019
  • +0/-0
  • Bendy Light specialist
Re: HTML question #2
« Reply #1 on: September 30, 2008, 03:08:36 AM »
You could probably do it by having a second, read only text box on the right (with its border set to zero width if you don't want it to be obvious that it's a text box), and the javascript necessary to copy the data would look something like this:

Code: [Select]
<script language="javascript">

function updateData() // copies the value of the left hand text box into the right hand one
{
  document.form2.textbox.value = document.form1.textbox.value;
}

</script>

Then you could just add an onChange attribute to the text box, like this:

Code: [Select]
<form name="form1">
<input type="text" name="textbox" value="" onChange="updateData();">
</form>

Alternatively, you could get rid of the function and just have the code to copy the data as the onChange attribute, but this way makes it easier to modify the code to allow for multiple text boxes doing the same thing, and just looks neater in any case.
I'm going to side with the white supremacists.

?

spacemanjones

  • 281
  • +0/-0
  • Magic pushes earth
Re: HTML question #2
« Reply #2 on: September 30, 2008, 03:44:20 AM »
Cool, i got the text box and all but when i tried it out it wasn't doing anything. I suck at this stuff but once i have a working example i can pick it apart and get it to work.

Could you creat a basic example of what i said?

If your post is a basic example tell me what i am doing wrong because all i got was a box that i could type in but when i typed in it nothing showed up anywhere.

Thanks OBL

?

spacemanjones

  • 281
  • +0/-0
  • Magic pushes earth
Re: HTML question #2
« Reply #3 on: September 30, 2008, 03:46:37 AM »
Ok nevermind... maybe i should have read the java script. I got it working, thanks this will work great.

*

MadDogX

  • 735
  • +0/-0
  • Resistor is fubar!
Re: HTML question #2
« Reply #4 on: September 30, 2008, 03:50:21 AM »
Code: [Select]
<html>
<head>
<title>Example</title>
<script language="Javascript">
function update()
{
document.getElementById("tgt").innerHTML = document.getElementById("src").value;
}
</script>
</head>
<body>
<textarea id="src" onKeyUp="update()"></textarea><br/><br/>
<p id="tgt">Text here</p>
</body>
</html>



EDIT: Ah, never mind.
Quote from: Professor Gaypenguin
I want an Orion slave woman :(
Okay, I admit it.  The earth isn't flat.

?

spacemanjones

  • 281
  • +0/-0
  • Magic pushes earth
Re: HTML question #2
« Reply #5 on: September 30, 2008, 05:45:57 AM »
Code: [Select]
<html>
<head>
<title>Example</title>
<script language="Javascript">
function update()
{
document.getElementById("tgt").innerHTML = document.getElementById("src").value;
}
</script>
</head>
<body>
<textarea id="src" onKeyUp="update()"></textarea><br/><br/>
<p id="tgt">Text here</p>
</body>
</html>



EDIT: Ah, never mind.

I liked this one, but how do i make the text box smaller like 1 line?

*

MadDogX

  • 735
  • +0/-0
  • Resistor is fubar!
Re: HTML question #2
« Reply #6 on: September 30, 2008, 05:53:42 AM »
Code: [Select]
<html>
<head>
<title>Example</title>
<script language="Javascript">
function update()
{
document.getElementById("tgt").innerHTML = document.getElementById("src").value;
}
</script>
</head>
<body>
<textarea id="src" onKeyUp="update()"></textarea><br/><br/>
<p id="tgt">Text here</p>
</body>
</html>



EDIT: Ah, never mind.

I liked this one, but how do i make the text box smaller like 1 line?


Make it an input. Replace this:

Code: [Select]
<textarea id="src" onKeyUp="update()"></textarea>
With this:

Code: [Select]
<input type="text" id="src" onKeyUp="update()" />
Quote from: Professor Gaypenguin
I want an Orion slave woman :(
Okay, I admit it.  The earth isn't flat.

?

spacemanjones

  • 281
  • +0/-0
  • Magic pushes earth
Re: HTML question #2
« Reply #7 on: September 30, 2008, 06:01:03 AM »
Sweet thanks alot man.

I think i am going to buy a book today for this stuff. Java for dummys...

*

MadDogX

  • 735
  • +0/-0
  • Resistor is fubar!
Re: HTML question #2
« Reply #8 on: September 30, 2008, 06:02:44 AM »
If you speak german or french, I'd recommend SelfHTML.org.
Quote from: Professor Gaypenguin
I want an Orion slave woman :(
Okay, I admit it.  The earth isn't flat.

*

Parsifal

  • Official Member
  • 36019
  • +0/-0
  • Bendy Light specialist
Re: HTML question #2
« Reply #9 on: September 30, 2008, 11:12:55 AM »
I didn't realise the innerHTML parameter was writeable. Writing to it has never worked for me, only reading from it.
I'm going to side with the white supremacists.