Avatar of pinkstonm
pinkstonm
 asked on

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

Avatar of undefined
Last Comment
weeezl

8/22/2022 - Mon
knightEknight

<INPUT type='text' name='field1' value='xyz' title='Help Text Goes Here'
   onmouseover='this.form.helptext.value=this.value;' />

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

knightEknight

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

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

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

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

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

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

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

ASKER
This does not handle Mouseout tho???
weeezl

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

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

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

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>