/    Sign up×
Community /Pin to ProfileBookmark

onclick or onmouseover, show certain text somewhere else… but for input fields?

Ok, so I have a form… super-simple, sitting in a table.

I need to make a field in the title-line that will display the “title” of the field you’re typing in. I have 4 rows of fields per line (by 4 or 5 columns) and that’s already too much space, so looking for something that’ll basically display “Title” and “Quantity” (etc) in the title field…

So basically I want it to do this:

[code=html]<tr>
<td colspan=”3″>Section Title</td>
<td colspan=”2″ id=”titlespace”>&nbsp;</td>
</tr>
<tr>
<td><input type=”text” name=”title” /></td>
<td><input type=”text” name=”qty” /></td>
<td><input type=”text” name=”value” /></td>
<td><input type=”text” name=”etc” /></td>
<td><input type=”text” name=”other” /></td>
</tr>[/code]

And that continues on for 3 more rows of input-fields ranging from 1 to 5 columns wide… Each of those is a section, and the database will pick how many sections there are, so these will need to have id-specific things with a number in it so that I can change the number with the database.

Anyway, I was thinking some kind of inner-html or show/hide sort of a thing… I don’t know.

Ideally I’d put a function like showcaption(‘Value’) to display “Value” in the “titlespace” cell but I don’t know what to do IN that function or how to apply it to a selected input field…

I hope that makes sense.

Any help would be greatly appreciated.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@CeJayMar 07.2012 — This should work :
[CODE]
<html>
<head>
<script type="text/javascript">
function setTitle(field)
{
element = document.getElementById("titlespace");
element.textContent = field.name;

}
</script>
</head>
<body>

<table>
<tr>
<td colspan="3">Section Title</td>
<td colspan="2" id="titlespace">&nbsp;</td>
</tr>

<tr>
<td><input onmouseover="setTitle(this);" type="text" name="title" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="qty" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="value" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="etc" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="other" /></td>
</tr>

<tr>
<td><input onmouseover="setTitle(this);" type="text" name="hello" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="world" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="some" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="etc" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="asdffd" /></td>
</tr>

<tr>
<td><input onmouseover="setTitle(this);" type="text" name="asdf movie" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="lol" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="blubb" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="rofl" /></td>
<td><input onmouseover="setTitle(this);" type="text" name="gudn" /></td>
</tr>

</table>
</body>

</html>
[/CODE]
×

Success!

Help @amandaNHT spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...