Solved

Mouseover Field Fill

Posted on 2003-02-26

HTML

1 solution

Medium Priority

300 Views

Last Modified: 2010-04-09

I have a form with multiple fields I want to be able to mouse over the value on a field and fill the contents of another field with a value almost like a help pop-up but in an isolated location.

fielda - value
fieldb - value

help: value

so mouse over label fielda and value for help would change.

Does anyone have a sample of this?

Comment

Question by:pinkstonm

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

12 Comments

LVL 33

Expert Comment

by:knightEknight

ID: 80264212003-02-26

LVL 33

Expert Comment

by:knightEknight

ID: 80264272003-02-26

I used value becuase you requested it ... you could also use the title like this:

onmouseover='this.form.helptext.value=this.title;'

LVL 33

Expert Comment

by:knightEknight

ID: 80264352003-02-26

oh ... I missed one thing ... you said "mouse over LABEL" ... in that case you would have to make an anchor or div out of the label:

<FORM>
<div onmouseover='document.forms[0].helptext.value=document.forms[0].field1.title;'>Label 1</div>
<INPUT type='text' name='field1' value='xyz' title='Help Text Goes Here'
onmouseover='this.form.helptext.value=this.value;' />

<TEXTAREA name='helptext'></textarea>

</form>

LVL 33

Expert Comment

by:knightEknight

ID: 80264492003-02-26

arg ... now I've got two mouseover events ... let me clean it up:

<FORM>

<DIV onmouseover='document.forms[0].helptext.value=document.forms[0].field1.title;'>Label 1</div>

<INPUT type='text' name='field1' value='xyz' title='Help Text Goes Here' />

<DIV onmouseover='document.forms[0].helptext.value=document.forms[0].field2.title;'>Label 1</div>

<INPUT type='text' name='field2' value='pdq' title='Help Text Goes Here' />

<TEXTAREA name='helptext'></textarea>

</form>

LVL 33

Expert Comment

by:knightEknight

ID: 80264532003-02-26

ARG! Now I've got two Label 1's! I'm sure you can handle that yourself :)

LVL 2

Accepted Solution

by:weeezl

weeezl earned 400 total points

ID: 80271962003-02-26

This may not be exactly what you're looking for, but I find this format to be very nice for help tips.

http://webfx.eae.net/dhtml/helptip/helptip.html

But if you just want the help to show up in a certain area...

<script>
function fillHelp (help) {
var helpOutput=document.getElementById("output");
helpOutput.innerText=help;
}
</script>

Input 1:<input type=text onmouseover="fillHelp('This is the help for Input 1')">
<br>
Input 2:<input type=text onmouseover="fillHelp('Input 2 help goes here')">
<br><br>
Help: <span id=output></span>

Author Comment

by:pinkstonm

ID: 80272472003-02-26

This does not handle Mouseout tho???

Author Comment

by:pinkstonm

ID: 80272872003-02-26

This does not handle Mouseout tho???

LVL 2

Expert Comment

by:weeezl

ID: 80273602003-02-26

ok... Add a mouseout.

<script>
function fillHelp (help) {
var helpOutput=document.getElementById("output");
if (help==null)
help='';
helpOutput.innerText=help;
}
</script>

Input 1:<input type=text onmouseover="fillHelp('This is the help for Input 1')" onmouseout="fillHelp()">
<br>
Input 2:<input type=text onmouseover="fillHelp('Input 2 help goes here')" onmouseout="fillHelp()">
<br><br>
Help: <span id=output></span>

Author Comment

by:pinkstonm

ID: 80274852003-02-26

WEEEZ, Perfect exactly what I was looking for....

Author Comment

by:pinkstonm

ID: 80295632003-02-26

Hey Weeez could you hint me on how to get that field to say something before I mouse on the initial entry?

LVL 2

Expert Comment

by:weeezl

ID: 80295992003-02-26

Just put an initial value in HTML inside of the span. Any new value added through the function will clear it.

Input 1:<input type=text onmouseover="fillHelp('This is the help for Input 1')" onmouseout="fillHelp()">
<br>
Input 2:<input type=text onmouseover="fillHelp('Input 2 help goes here')" onmouseout="fillHelp()">
<br><br>
Help: <span id=output>Initial Help Value</span>

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create N column layout for Bootstrap

Article by: Julian

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.

How to Become a Web Developer

Article by: Ryan

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?

Creating Scalable Full-Width Header in CSS3

Video by: Sarah

In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.: Create a new div and name it Header. Position it with position:absolute at the top…

HTML
CSS

Introduction to HTML (Part 2)

Video by: Jason

HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…