/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Form Fields with JS??

Copy linkTweet thisAlerts:
Oct 05.2006

Hello all,
I’m fairly new to scripting, although I’ve beeing with css & html for many years. I have created a form which has about 9-10 various input fields. One of the fields is a drop down menu, where the last option is “other”. If someone selects this option, I want another text input field to appear below.

Here’s what I have so far, but it’s not working. Can anyone please help me?!?!

<select name=”Title>
<option name=”provider” value=”Select” selected=”selected”>Select One</option>
<option name=”blah” value=”1″>1</option>
<option name=”blah” value=”2″>2</option>

<option name=”provider” value=”3″>ASP-One</option>
<option name=”provider” value=”4″>Intermedia</option>
<option name=”provider” value=”5″>LanLogic</option>
<option name=”provider” value=”5″>Mi8</option>
<option name=”provider” value=”6″>USA.net</option>
<option id=”OtherSelect” name=”blah” value=”Other” onclick=”swapform();”>Other</option>
</select>
<input id=”OtherField” type=”text” value=”” size=”20″ style=”visibility: hidden”>

<script>
function swapform() {
var visable
var hidden
visable = document.getElementById(“OtherSelect”).innerHTML;
hidden = document.getElementById(“OtherField”).innerHTML;
document.getElementById(“OtherSelect”).innerHTML = hidden;
}
</script>

Thx!! ?

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@EpotusOct 05.2006 — ivdezine,

some things to note:

(1) You shouldn't use 'name' in the actual options, only in the selection element.

(2) call your function in the <select> element, not the <options>

(3) This function is static for this particular hidden field. you can customize your selections to show specific fields but that gets a little more complicated.

User the following Code:

<script>

function swapform() {

document.getElementById("OtherField").style.display = "block";

}

</script>

<form name="myForm">

<select name="Title" onchange="swapform();">

<option value="Select" selected="selected">Select One</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">ASP-One</option>

<option value="4">Intermedia</option>

<option value="5">LanLogic</option>

<option value="5">Mi8</option>

<option value="6">USA.net</option>

<option value="Other">Other</option>

</select>

<input id="OtherField" type="text" value="" size="20" style="display:none;" />

</form>
Copy linkTweet thisAlerts:
@JMRKEROct 05.2006 — I think it might work a little better like this:

[code=php]
<html>
<head>
<title>Select Other</title>
</head>
<script type="text/javascript">

function swapform() {
elem = document.myForm.Title.selectedIndex;
if (document.getElementById('Title').options[elem].value == 'Other') {
document.getElementById("OtherField").style.display = "block";
} else {
document.getElementById("OtherField").style.display = "none";
}

}

</script>
</head>
<body>
<form name="myForm">
<select id="Title" name="Title" onchange="swapform();">
<option value="Select" selected="selected">Select One</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">ASP-One</option>
<option value="4">Intermedia</option>
<option value="5">LanLogic</option>
<option value="5">Mi8</option>
<option value="6">USA.net</option>
<option value="Other">Other</option>
</select>

<input id="OtherField" type="text" value="" size="20" style="display:none;" />

</form>
</body>
</html>
[/code]

But you many not wish to hide and show textbox input for 'Other' selection.
Copy linkTweet thisAlerts:
@ivdezineauthorOct 05.2006 — Thank you very much! That did it. ?
×

Success!

Help @ivdezine 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...