Help - Search - Members - Calendar
Full Version: Newbie combo box help
HTMLHelp Forums > Programming > Client-side Scripting
busby
biggrin.gif Hi all im new here sorry if this has been posted before i did do a search and nothing relating to my query came up,

im looking to add 2 text boxes to a drop down menu, what i mean is when some one selects an option in my drop down menu 2 text boxes appear i want this feature on three options also i want them to see what data i want them to pop in here is what i have below i want option 5 6 and 7 to have this feature in the job discription menu thank you for your help and advice


---------------------------------------------------------------------------------------------------
<html>
<head>
<title>html template</title>
</head>
<body>
<form name="personaldata" method="POST" action=" ">
<input type=hidden name="recipient" value="">
<input type=hidden name="required" value="email">

<fieldset>
<legend>Job Request Form</legend>
fred: <input type="text" name="fred" /><br /><br />
info: <input type="text" name="info" size=30 value="type your info'"><br /><br

/>
E-mail: <input type=text name="email" size=30 value="Please enter your email

address"><br /><br />

Job discription:<br />
<select name="Jobdiscription" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select><br /><br />


Package:<br />
<select name="Package" size="1">
<option value="pie">pie</option>
<option value="pastie">pastie</option>
<option value="buttie">buttie</option>
<option value="fruit">fruit</option>
</select><br /><br />

type<input type="text" name="type" size=30 value="Required type here"><br /><br

/>

Please type other details here:<br />
<textarea name="Please type other details here" rows="10"

cols="30"></textarea><br /><br />

<input type="submit" value="Send"> <input type="reset" value="Reset">

</fieldset>

</form>
</body>
</html>
------------------------------------------------------------------------------------------------------------
pandy
Not sure I understand, but if you want an INPUT inside an OPTION you can't have that. OPTION can only contain plain text, not other elements.
http://htmlhelp.com/reference/html40/forms/option.html
Frederiek
The key question is:
QUOTE
when some one selects an option in my drop down menu, 2 text boxes [should] appear

This can be done with Javascript. See http://www.sitepoint.com/forums/printthread.php?t=319080 or something similar.
pandy
QUOTE(Frederiek @ Sep 18 2008, 09:17 AM) *

The key question is:
QUOTE
when some one selects an option in my drop down menu, 2 text boxes [should] appear


Oh. blush.gif
Frederiek
That's ok. Can happen wink.gif
busby
Hi
this is this box i would like to add to my html if you scroll to other a text box appears i would like 2 boxes i can name so the user knows what data to pop in those boxes im a total noob to this i dont want the submit button also i want to edit my html names and dont want to mess the boxes up can some one decypher the code and give the the command line so i can edit my html to work how i want it to needs to be thicko proof as im new to this i dont want you guys to do it for me as i wont learn that way just a good shove in the right direction by telling me which parts to put in my html and edit

thanks sorry for being a pain








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<TITLE>Combo box demo</TITLE>
<script type="text/javascript" language="JavaScript"><!--
function activate(field) {
field.disabled=false;
if(document.styleSheets)field.style.visibility = 'visible';
field.focus(); }
function last_choice(selection) {
return selection.selectedIndex==selection.length - 1; }
function process_choice(selection,textfield) {
if(last_choice(selection)) {
activate(textfield); }
else {
textfield.disabled = true;
if(document.styleSheets)textfield.style.visibility = 'hidden';
textfield.value = ''; }}
function valid(menu,txt) {
if(menu.selectedIndex == 0) {
alert('You must make a selection from the menu');
return false;}
if(txt.value == '') {
if(last_choice(menu)) {
alert('You need to type your choice into the text box');
return false; }
else {
return true; }}
else {
if(!last_choice(menu)) {
alert('Incompatible selection');
return false; }
else {
return true; }}}
function check_choice() {
if(!last_choice(document.demoform.menu)) {
document.demoform.choicetext.blur();
alert('Please check your menu selection first');
document.demoform.menu.focus(); }}
//--></script>

<form action="http://www.malibutelecom.com/yucca/cgi-bin/checkcombo.pl"
name="demoform" onsubmit=
"return valid(this.menu,this.choicetext)">
<select name="menu" onchange=
"process_choice(this,document.demoform.choicetext)">
<option value="0" selected>(please select:)</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="other">other, please specify:</option>
</select>
<noscript>
<input type="text" name="choicetext">
</noscript>

<script type="text/javascript" language="JavaScript"><!--
disa = ' disabled';
if(last_choice(document.demoform.menu)) disa = '';
document.write('<input type="text" name="choicetext"'+disa+
' onfocus="check_choice()">');
if(disa && document.styleSheets)
document.demoform.choicetext.style.visibility = 'hidden';
//--></script>

<p>
<input type="submit">
</form>
Darin McGrew
I've moved this thread to the Client-side Scripting topic, since it's no longer about plain markup.
busby
Hi
Thanks
for putting it in the correct thread so any ideas ? is there a straight forward command tag like the text boxes or option tags i could type in aso i get the combo box i require ?
pandy
No. You need JavaScript + CSS to show/hide the form controls depending on user input.

Take a look at this.
http://www.quirksmode.org/dom/usableforms.html
Darin McGrew
QUOTE
is there a straight forward command tag like the text boxes or option tags i could type in aso i get the combo box i require ?
No. Sorry, but HTML 4 doesn't support combo boxes. HTML 5 promises markup for combo boxes, but it's still just a draft, and browser support is weak.
pandy
What does combo box mean in this context? Some kind of multiple choice thing?

I've heard the word "combo box" used so many times for select dropdowns and the equivalent in program interfaces, that I thought that was what it meant.

I plead ESL! blush.gif
Darin McGrew
A combo box is basically a select-style drop-down widget that allows you to choose one of the standard options, or to type in your own value instead.

Among other places, I'm used to seeing them in the font size selection for OpenOffice. You can select one of the standard sizes offered, or you can type some other size.

The most reliable way to get this kind of functionality with HTML forms is still to use a select element with one option for "other", and to use a text input element with a label like "if other, specify". Some people like hiding the text input element unless the "other" option has been selected.
pandy
Aha! The program boxes I think of actually are of that type, at least most of them, but I never made the distinction. Thanks.
Christian J
QUOTE(Darin McGrew @ Sep 22 2008, 06:28 PM) *

Some people like hiding the text input element unless the "other" option has been selected.

If you don't do that, which value should be used if the user both types into the text field and selects an option? And since the hiding requires client-side script it can't be trusted.

Maybe one could use radio buttons to force the user to choose between a few fixed values and a text field?
Brian Chandler
QUOTE(Christian J @ Sep 23 2008, 03:09 AM) *

QUOTE(Darin McGrew @ Sep 22 2008, 06:28 PM) *

Some people like hiding the text input element unless the "other" option has been selected.

If you don't do that, which value should be used if the user both types into the text field and selects an option? And since the hiding requires client-side script it can't be trusted.


It may be clear from the context - for example the box is labelled "Other occupation (if none selected above)". And if you use javascript to hide the box, it will all work for everyone, except that you have to decide how to handle a "double" selection. You can always throw the form back with an error.

QUOTE

Maybe one could use radio buttons to force the user to choose between a few fixed values and a text field?


Doesn't make any difference. Radio buttons are functionally isomorphic to a selection box.
busby
basically its going to be a job discription for a box repair so they can click on the box they have then on certain boxes they have version and serial numbers so a box each for them once the correct box is selected. maybe just easier to have them as text boxes on show just wanted it to not look cluttered it is going to go on a https: and what it to be simple and secure thanks for your guidence really appreciate it now im just going to figure out how to get it to e- mail the data to inbox got an idea how.
Darin McGrew
Please see the FAQ entry How do I get form data emailed to me?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.