Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 310
  • Last Modified:

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?
0
pinkstonm
Asked:
pinkstonm
  • 5
  • 4
  • 3
1 Solution
 
knightEknightCommented:
<INPUT type='text' name='field1' value='xyz' title='Help Text Goes Here'
   onmouseover='this.form.helptext.value=this.value;' />

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

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

onmouseover='this.form.helptext.value=this.title;'
0
 
knightEknightCommented:
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>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
knightEknightCommented:
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>
0
 
knightEknightCommented:
ARG!  Now I've got two Label 1's!  I'm sure you can handle that yourself :)
0
 
weeezlCommented:
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>
0
 
pinkstonmAuthor Commented:
This does not handle Mouseout tho???
0
 
pinkstonmAuthor Commented:
This does not handle Mouseout tho???
0
 
weeezlCommented:
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>
0
 
pinkstonmAuthor Commented:
WEEEZ, Perfect exactly what I was looking for....
0
 
pinkstonmAuthor Commented:
Hey Weeez could you hint me on how to get that field to say something before I mouse on the initial entry?
0
 
weeezlCommented:
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>
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now