Page 1 of 2

Auto Echo?

Posted: Tue Jan 24, 2006 10:47 am
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!

Posted: Tue Jan 24, 2006 10:49 am
by JayBird
Sounds like you need some client-side code!

Posted: Tue Jan 24, 2006 11:32 am
by Chris Corbyn

Code: Select all

<input type="text" name="something" onkeyup="document.getElementById('foo').innerHTML=this.value;" />
<div id="foo">Default text</div>

Posted: Tue Jan 24, 2006 11:37 am
by nickman013
Beatiful. Thank You So Much!

Posted: Tue Jan 24, 2006 11:46 am
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

Posted: Tue Jan 24, 2006 11:50 am
by Chris Corbyn
You'll done this for a file input box? That won;t work... they don't hold a value ;)

Posted: Tue Jan 24, 2006 12:02 pm
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

Posted: Tue Jan 24, 2006 12:32 pm
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? :)

Posted: Tue Jan 24, 2006 12:58 pm
by nickman013
my javascript knowledge is 0 %

lol thanks your the best!

Posted: Tue Jan 24, 2006 2:01 pm
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.

Posted: Tue Jan 24, 2006 2:11 pm
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.

Posted: Tue Jan 24, 2006 3:06 pm
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();' />

Posted: Tue Jan 24, 2006 4:48 pm
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?

Posted: Tue Jan 24, 2006 5:34 pm
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)

Posted: Tue Jan 24, 2006 6:03 pm
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!