homepage Welcome to WebmasterWorld Guest from 23.20.28.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / WebmasterWorld / Webmaster General
Forum Library, Charter, Moderators: phranque & physics

Webmaster General Forum

    
Using Select onChange to show an input field using Javascript
Using javascript to show an input field after using select
lulubell




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

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

 

dmorison




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

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!

garann




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / Webmaster General
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved