Not necessarily jQuery, though that could make it easier. Good ol’ plain javascript will suffice. You essentially output the text field when the form is output, except it is normally hidden by CSS visibility: none; (unless “Other…” is the default selection).
You add an event handler for the dropdown’s onchange event. The handler logic would be if the “Other…” option was selected, change the text field visibility to block or inline, else change it to none. It’s not a problem to set it to none even though it may have already been that way.
Here’s what I have in my child page…
First, I have this script:
<script language="javascript">
function showme(){
var s = document.race-registration-form.team_name_select;
var h = document.race-registration-form.team_name_enter;
if( s.selectedIndex == 5 ) {
h.style.visibility="visible";
} else {
h.style.visibility="hidden";
}
}
</script>
Then I have this HTML code:
<select name="team_name_select" onchange="showme()">
<option value="none">select a team name</option>
<option value="team1">Team 1</option>
<option value="team2">Team 2</option>
<option value="team3">Team 3</option>
<option value="team4">Team 4</option>
<option value="other">Other...</option>
</select>
<input type ="text" name="team_name_enter" style="position:relative;visibility:hidden;" value="enter a team name">
Doesn’t seem to work on my WordPress child page.
Hmmm. There’s a problem with using hyphens (-) in the form tag name. Switching to underscore solves the problem. race_registration_form
FYI I determined this by loading your script onto a pre-defined test page I have and checking the JS console for errors when selecting Other…
I’m not sure why hyphens are a problem, the console reported “ReferenceError: registration is not defined” when hyphens are used. No problem with race or form, just registration. Queer.
Worked like a charm! Thanks for your help bc.
Manny
