pinkstonm

asked on 2/26/2003

Mouseover Field Fill

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?

HTML

Last Comment

weeezl

8/22/2022 - Mon

knightEknight

2/26/2003

knightEknight

2/26/2003

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

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

knightEknight

2/26/2003

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>

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

knightEknight

2/26/2003

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>

knightEknight

2/26/2003

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

ASKER CERTIFIED SOLUTION

weeezl

2/26/2003

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

pinkstonm

2/26/2003

ASKER

This does not handle Mouseout tho???

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.

pinkstonm

2/26/2003

ASKER

This does not handle Mouseout tho???

weeezl

2/26/2003

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>

pinkstonm

2/26/2003

ASKER

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

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

pinkstonm

2/26/2003

ASKER

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

weeezl

2/26/2003

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>