Forum Moderators: open

Message Too Old, No Replies

Changing text dynamically

         

Crump

3:33 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



I would like to dynamically update some text on a page when the users clicks on a form.
In other words I have a form with several text boxes. When a user clicks in a text box I want to have some text elsewhere on the page change, giving the user instructions on what they should enter in that text box.

Any examples of how to do this out there? Or can someone at least point me in the right direction.

Thanks!

milanmk

7:38 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



<form method="POST" name="test">
<input type="text" name="name" size="20" onfocus="msg.innerHTML='Please write your name here.'" onblur="msg.innerHTML=''">
<span id="msg"></span><br>
<input type="submit" value="Submit">
</form>

I have just posted the basic functionality you wanted in your FORM but you can change the message, look and feel according to your requirements.

birdbrain

8:42 pm on Feb 8, 2006 (gmt 0)



Hi there Crump,

you may also find this of interest.;)
All that is required of you is that you add inputs and information to match. ;)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>input information</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#div1,#div2 {
width:200px;
float:left;
}
input,textarea {
margin:8px;
}
-->
</style>
<script type="text/javascript">
<!--
var info=new Array();
info[0]='this is the information for input 0';
info[1]='this is the information for input 1';
info[2]='this is the information for input 2';
info[3]='this is the information for input 3';
var inp=document.getElementsByTagName('input');
function getInfo() {
for(c=0;c<inp.length;c++) {
inp[c].id='inp_'+c;
inp[c].onfocus=function() {
showInfo(this.id,this);
}
}
}
function showInfo(id,obj) {
id=id.split('_');
num=id[1];
document.getElementById('info_display').value=info[num];
obj.onblur=function() {
document.getElementById('info_display').value='';
}
}
onload=getInfo;
//-->
</script>
</head>
<body>
<form action="#">
<div id="div1">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
<div id="div2">
<textarea id="info_display" rows="5" cols="30"></textarea>
</div>
</form>
</body>
</html>

birdbrain

Crump

9:18 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



These replies worked great, thank you.

However, I just had one question. How do I set a default instruction? in other words if the user hasn't clicked on any text boxes I still want it to say something. I tried this:


<script type="text/javascript">
<!--
msg.innerHTML = 'Default text';
//-->
</script>

This is giving a error message and not working. Also, are there any problems with having this outside of the <head> part of the page?

birdbrain

9:36 pm on Feb 8, 2006 (gmt 0)



Hi there Crump,

depending on which method you choose, either put the default message between the span tags or the textarea tags.. ;)

birdbrain

Crump

9:59 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



bird,
That was painfully obvious. Thanks!

Edit: ok why isn't this working in FF?

coopster

10:02 pm on Feb 8, 2006 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



Are you certain you have JavaScript enabled in your options/preferences?

birdbrain

10:25 pm on Feb 8, 2006 (gmt 0)



Hi there Crump,

you would not have had that problem with my script. ;)

instead of...


<input type="text" name="name" size="20"
onfocus="msg.innerHTML='Please write your name here.'"
onblur="msg.innerHTML=''">

...use...


<input type="text" name="name" size="20"
onfocus="document.getElementById('msg').innerHTML='Please write your name here.'"
onblur="document.getElementById('msg').innerHTML=''">

birdbrain

milanmk

10:28 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



How do I set a default instruction?

<form method="POST" name="test">
<span id="msg">Help Area</span> <br>
<input type="text" name="name" size="20" onfocus="msg.innerHTML='Please write your name here.'" onblur="msg.innerHTML='Help Area'">
<br>
<input type="submit" value="Submit">
</form>

EDIT: You can use birdbrain's suggestion for document.getElementById

Crump

11:01 pm on Feb 8, 2006 (gmt 0)

10+ Year Member



Working perfect now! thanks bird, milan, and coop for all your suggestions (javascript was enabled).

document.getElementById is what I needed to make it work with FF. This forum is great, thanks everyone!