Auto Echo?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Auto Echo?

Post by nickman013 »

Hey!

I have a form on my site, that I want to auto echo what is being typed in, in realtime.

For example.

Code: Select all

<form action=submit.php method=post>
<input type=text name=name>
<input type=submit value=Submit>
</form>

<table border=1>
<tr><td>Name: </td><td><? autoecho $name ?></td></td>
</table
Say that you type bob in that input field, I want it to auto echo on the same page so they see what they are writing.

I know autoecho is not a real function.

I need to do this because I have a form that adds data to a page, and I want them to view what it will look like, because it writes to the page.

Thank You!
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Sounds like you need some client-side code!
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Code: Select all

<input type="text" name="something" onkeyup="document.getElementById('foo').innerHTML=this.value;" />
<div id="foo">Default text</div>
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

Beatiful. Thank You So Much!
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

I actually have one more question. Is it possible to do it for a image upload input.

Code: Select all

<input type="file" name=uploadedfile onkeyup="document.getElementById('yoo2').innerHTML=this.value;">
</form>

<div id=yoo2></div>
I thought that would be it , but it doesnt seem to work.


Thank You
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

You'll done this for a file input box? That won;t work... they don't hold a value ;)
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

Ok, Thats not a problem, I am just stuck on these two fields. A radio button, and a <img src=<div id=picture></div>>
Here is my script so far.

Code: Select all

For the IMG one.
<img src=/pages/muotreport/<div id=picture2></div> width=320 height=240>

For the Radio Buttons.
Sex: <input type=radio name=sex value=MALE onkeyup="document.getElementById('sex2').innerHTML=this.value;">Male &nbsp; <input type=radio name=sex value=FEMALE onkeyup="document.getElementById('sex2').innerHTML=this.value;">Female

Thank You
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

For images:

Code: Select all

<img id="foo" src="/some/where/nice.jpg" />
<input type="text" name="xxx" onkeyup="document.getElementById('foo').src=this.value;" />
Not sure what you're trying to do with the radio buttons but I'd suggest not using KeyUp and use OnClick or OnChange for a start :) I'm guessing you're JS knowledge is not much? :)
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

my javascript knowledge is 0 %

lol thanks your the best!
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Code: Select all

For the IMG one. 
<img src=/pages/muotreport/<div id=picture2></div> width=320 height=240>
Looks like you want to dynamically change the source of the image file...you can do this by

Code: Select all

document.getElementById("image_id").src = "imagepath";
The next time when you post something, make sure you explain the problem to your best. use examples of what you want a script to do, inputs and outputs.
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

aright, thanks for the tip.

Code: Select all

document.getElementById("image_id").src = "/pages/muotreport/";
with this, how would i enter it into the <IMG> tag?

thank you.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

Code: Select all

<script type = 'text/javascript'>
	function changeImage(){
		document.getElementById("image_id").src = "images/image2.gif";
	}
</script>

<img id = 'image_id' src ='images/image1.gif' />
<input type = 'button' value = 'change image' onclick = 'changeImage();' />
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

thank you for making the script for me! :D

But will this preview the image before it is even uploaded on my web space?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

nickman013 wrote:thank you for making the script for me! :D

But will this preview the image before it is even uploaded on my web space?
No... that's impossible to do ;) JavaScript can;t access the users' filesystem for security reasons 8)
User avatar
nickman013
Forum Regular
Posts: 764
Joined: Sun Aug 14, 2005 12:02 am
Location: Long Island, New York

Post by nickman013 »

aright no problem. :D

i just got one really stupid question,

this table

Code: Select all

<table border=1 align=center width=50>

<tr><th colspan=2><div align=left style=display:inline;>Muot Week # 2</div>--<div align=right style=display:inline;> 1.22.04 </div></th></tr>

<tr><th colspan=2><img src=/pages/muotreport/chatter.bmp></tr></td>

<tr><td width=50 valign=top><div align=center>Bio:</div><br>

<div align=left>Name:</div>&nbsp;&nbsp;&nbsp;<font color=red>umm chad somethign i think</font></div><br>

<div align=left>Nickname:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>chatterbox</font></div><br>

<div align=left>Age:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>20</font></div><br>

<div align=left>Loc:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>Oneonta, N.Y.</font></div><br>

<div align=left>Sex:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>MALE</font></div><br>

<div align=left>Weight:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>160</font></div><br>

<div align=left>Height:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>5' 4"</font></div></td>

<td valign=top width=50><div align=left>Muot Status:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>kids a serious muot</font></div><br><div align=left>About this Muot:</div>&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>This muotomeyer was found in upstate ny in a college town of oneonta. This idiot is in a frat and acts tough but was obviously the loser in his highscool. Known for talking to girls about him having sex with other girls...real muot. And also three strikes against this muot for looking like brandon.</font></td></tr>

</table><br><center>
this table resizes in width, to the width of the picture, so it fits perfect, is there a way to get it just be a controlled width?

thank you!
Post Reply