Using a Summary Form to Support Local Processing : JavaScript DHTML examples (example source code) » Form Control » Option Select ComboBox

JavaScript DHTML
C++
Java Products
Java Articles
JavaScript DHTML Home  »   Form Control   » [  Option Select ComboBox  ]   
 



Using a Summary Form to Support Local Processing

Please note that some example is only working under IE or Firefox.


/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Submitting the results of local form processing</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function processOrder() {
 order = ""
 order += document.orderForm.model.selectedIndex
 order += document.orderForm.doors.selectedIndex
 order += document.orderForm.color.selectedIndex
 sel = document.orderForm.accessories
 for(i=0;i<sel.length;++i)
  if(sel.options[i].selectedorder += i
 document.submitForm.result.value = order
 document.submitForm.submit()
 return false
}
// --></SCRIPT>
</HEAD>
<BODY>
<H1>Select your next car:</H1>
<PRE>Model           Doors     Color    Accessories</PRE>
<FORM ACTION="" NAME="orderForm"ONSUBMIT="return processOrder()">
<SELECT NAME="model" SIZE="3">
<OPTION>Big Blob</OPTION>
<OPTION>Wild Thing</OPTION>
<OPTION>Penny Pincher</OPTION>
<OPTION>Class Act</OPTION>
</SELECT>
<SELECT NAME="doors" SIZE="3">
<OPTION>doors</OPTION>
<OPTION>doors</OPTION>
</SELECT>
<SELECT NAME="color" SIZE="3">
<OPTION>red</OPTION>
<OPTION>white</OPTION>
<OPTION>blue</OPTION>
<OPTION>black</OPTION>
<OPTION>brown</OPTION>
<OPTION>silver</OPTION>
<OPTION>pink</OPTION>
</SELECT>
<SELECT NAME="accessories" SIZE="3" MULTIPLE="MULTIPLE">
<OPTION>air conditioning</OPTION>
<OPTION>CD player</OPTION>
<OPTION>bigger engine</OPTION>
<OPTION>fancy dashboard</OPTION>
<OPTION>leather seats</OPTION>
</SELECT>
<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="I'll take it!"></P>
</FORM>
<FORM ACTION="http://www.jaworski.com/javascript/echo.cgi"
      METHOD="GET" NAME="submitForm">
<INPUT TYPE="HIDDEN" NAME="result">
</FORM>
</BODY>
</HTML>
Related examples in the same category
1.  Option selected index
2.  Auto Linked Option Listbox without button
3.  Change background
4.  Changing Select Element Content (two Combobox)
5.  Drop-down Redirect - No Submit button
6.  Drop-down Redirect - Submit
7.  Dropdown list (combobox) in a form
8.  dropdown list (combobox) in form 2
9.  Disable or enable an option
10.  Disable and enable a dropdown list (combobox)
11.  Return the name of the form that contains dropdown list (combobox)
12.  Number of options in the dropdown list(Combobox)
13.  Change the size of a dropdown list (ComboBox)
14.  Select multiple options in a dropdown list (option)
15.  Return the selected option as text in option
16.  Return the selected option as a number
17.  Change the option text
18.  Remove an option from a dropdown list (combobox)
19.  Methods and Properties of the Select Object
20.  Properties of the Option Object
21.   Using the Location object to change another frame's URL
22.  Navigating with a SELECT Object
23.  Using the selectedIndex Property
24.   Modifying OPTGROUP Element Labels
25.  Using the options[index].text Property
26.   Using the options[index].value Property
27.  Triggering a Color Change from a Pop-Up Menu
28.  Modifying SELECT Options
29.  Modifying SELECT Options (IE4+)
30.  Modifying SELECT Options (NN6+)
31.  Selecting an Option Using JavaScript
32.  Linked ComboBox (option) Country =- province
33.  ComboBox set value to TextField
34.  Menu(Option) Generator
35.  URL Option ComboBox
36.  Show Selected Option items








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.