Welcome to WebmasterWorld Guest from 107.22.7.35

Forum Moderators: phranque

Message Too Old, No Replies

Using Select onChange to show an input field using Javascript

Using javascript to show an input field after using select

     
1:18 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



Hi

I'm trying to build a form that which has many fields.
The first field is a select field called title (Contains option values for Mr, Mrs, Ms Other and so on) What I want to happen is if the user has chosen other, the form refreshes with an additional input type box where the user can enter their preference.

After many other fields, I want to submit the form, put the contents into a database and email.

When the user has selected Other from the drop down list, I want the entry in the title field in the db to be what the user then entered in the input type field.

Does anyone have any ideas? I know I need to use onChange using Javascript, but don't know how to!

Please help.....

Lulubell

1:38 pm on Apr 29, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi lulubell,

The following code shows you how to use OnChange to submit your form if the value of your "title" field is "Other":

<script type='text/javascript'>

function TitleOnChange()
{
if (document.details.title.value == "Other")
{
document.details.submit();
}
}

</script>

<form name='details' method='post' action='formhandler.cgi'>

<select name='title' onchange='javascript:TitleOnChange();'>

<option value='Mr'>Mr</option>

<option value='Mrs'>Mrs</option>

<option value='Other'>Other</option>

</select>

<!-- rest of your form -->

</form>

When you receive this at the server, you then need to test for title=Other, and if so send a new form back to the client with your "title" field now being a text box. Leave it with the name "title", and you can just use the same code to commit the form to your database when the form is submitted for the second time.

Don't forget to pre-populate the new form with any fields that had already been completed - or you'll have some very unhappy nearly potential customers!

Hope this helps!

11:44 pm on Apr 29, 2003 (gmt 0)

10+ Year Member



I'd do this slightly differently (if you don't have to worry about Netscape 4 very much). This way, you can do it all on one page and not sweat processing an extra form just for a title:

<script>
function checkForOther(obj) {
if (!document.layers) {
var txt = document.getElementById("otherTitle");
if (obj.value == "other") {
txt.style.display = "inline";
// gives the text field the name of the drop-down, for easy processing
txt.name = "selTitle";
obj.name = "";
} else {
txt.style.display = "none";
txt.name = "";
obj.name = "selTitle";
}
}
}
</script>

<form name="frm1" method="POST" action="nextPage.htm">
<select name="selTitle" id="titles" onchange="checkForOther(this)">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="other">Other</option>
</select>
<input type="text" id="otherTitle" style="display:none;">
... more fields ...
</form>

hth,
g.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month