Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onclick or onchange in select 1

Status
Not open for further replies.
Tuck007

Tuck007

Technical User
Apr 29, 2002
105
US
Hi,

I'm creating a form for estimates. As the user fills in various items on the form, more parts of the form appear to help get all the right information from the customer. I have each section of the form in different tables. I want to have a good way to select the following:
Code: 
<table width=&quot;100%&quot; id=&quot;theStep2&quot; style=&quot;display:none&quot; bgcolor=&quot;#ffffff&quot;>
<tr>
<td colspan=&quot;2&quot;>Would you like to:<br>
<select name=&quot;desc&quot; size=&quot;3&quot;>
<option value=&quot;ADD&quot;>Add New Equipment</option>
<option value=&quot;REPL&quot;>Replace Equipment</option>
<option value=&quot;REPL ADD&quot;>Replace and Add Equipment</option>
</select>
</td>
</tr>
</table>

When a customer makes a selection, I want either one table or the other to appear, or both if the final option is selected. Here is a snippet of the code I am using presently:
Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 3.2 FINAL//EN&quot;>

<HTML>
<HEAD>
<TITLE>Atlas Home</TITLE>
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;atlashac.css&quot; />
</HEAD>

<BODY>
<script type=&quot;text/javascript&quot; src=&quot;validate.js&quot;>
</script>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
<!--
function showStep3a(){

				 document.getElementById(&quot;theStep3a&quot;).style.display=&quot;block&quot;;

				 }

function showStep3r(){

				 document.getElementById(&quot;theStep3r&quot;).style.display=&quot;block&quot;;

				 }
-->
</script>

				<form ENCTYPE=&quot;multipart/form-data&quot; action=&quot;/2003ofc/index.php&quot; method=&quot;post&quot; name=&quot;frmSubmission&quot; onSubmit=&quot;return validateForm()&quot;>

				<INPUT TYPE=&quot;hidden&quot; name=&quot;MAX_FILE_SIZE&quot; value=&quot;1048576&quot;>   

				<INPUT TYPE=&quot;hidden&quot; name=&quot;task&quot; value=&quot;upload&quot;>
<table width=&quot;100%&quot; bgcolor=&quot;#ffffff&quot;>
				<tr>
				<td><h1><font color=&quot;#ff9900&quot;>2. Equipment</font></h1></td>
				</tr>
				</table>
				
				<table width=&quot;100%&quot; id=&quot;theStep2&quot; style=&quot;display:none&quot; bgcolor=&quot;#ffffff&quot;>
				<tr>
				<td colspan=&quot;2&quot;>Would you like to:<br>
				
				<select name=&quot;desc&quot;>
				<option onchange=&quot;showStep3a()&quot; value=&quot;ADD&quot;>Add New Equipment</option>
				<option onchange=&quot;showStep3r()&quot; value=&quot;REPL&quot;>Replace Equipment</option>
				<option onchange=&quot;showStep3r(); showStep3a()&quot; value=&quot;REPL ADD&quot;>Replace and Add Equipment</option>
				</select>
				</td>
				</tr>
				</table>
				
				<table width=&quot;100%&quot; bgcolor=&quot;#ffffff&quot;>
				<td><h1><font color=&quot;#ff9900&quot;>3. Description</font></h1></td>
				</tr>
				</table>
				
				<table width=&quot;100%&quot; id=&quot;theStep3r&quot; style=&quot;display:none&quot; bgcolor=&quot;#ffffff&quot;>
				<tr>
				<td>I would like to replace:<br>
				</td>
				</tr>
				</table>
				
				<table width=&quot;100%&quot; id=&quot;theStep3a&quot; style=&quot;display:none&quot; bgcolor=&quot;#ffffff&quot;>
				<tr>
				<td>I would like to add:<br>
				</td>
				</tr>
				<tr>
				<td>
						<table>
						<tr>
						<td><input type=&quot;checkbox&quot; value=&quot;FAU&quot;> Furnace System</td>
						<td><input type=&quot;checkbox&quot; value=&quot;DUCTS&quot;> Furnace Ducts</td>
						<td><input type=&quot;checkbox&quot; value=&quot;WF&quot;> Wall Furnace</td>
						</tr>
						<tr>
						<td><input type=&quot;checkbox&quot; value=&quot;DV&quot;> </td>
				</td>
				</tr>
				</table>
.:TUCK:.
 
Sort by date Sort by votes
Is that working for you. I've never seen an onChange() method inside of an option tag. It usually belongs inside the select tag. Here's an option.
Code: 
function changWin(elmtRef) {
  if (elmtRef.options[elmtRef.selectedIndex].value == &quot;a&quot;) {
    doSomething
  }
  if (elmtRef.options[elmtRef.selectedIndex].value == &quot;b&quot;) {
    doSomethingElse
  }
  if (elmtRef.options[elmtRef.selectedIndex].value == &quot;c&quot;) {
    doSomething and doSomethingElse
  }
}

<select name=&quot;somename&quot; onChange=&quot;changWin(this);&quot;>
  <option value=&quot;a&quot;>Option A</option>
  <option value=&quot;b&quot;>Option B</option>
  <option value=&quot;c&quot;>Option C</option>
</select>

Using the this in the function call in conjuction with the elmtRef in the function name passes reference to the select list to the JavaScript function. Otherwise, you will need to explicitly reference the select list like this.
Code: 
document.formname.listname.options[document.formname.listname.selectedIndex].value == &quot;a&quot;

Hope this helps.

ToddWW
 
Upvote 0 Downvote
Worked great for what I decided to apply it to. I droped the idea of of those 3 selections. I ended up using your code in a Referred by list like so:
Code: 
<script>
function showOther(elmtRef) {
  if (elmtRef.options[elmtRef.selectedIndex].value == &quot;REF-BY&quot;) {
    document.getElementById(&quot;theOther&quot;).style.display=&quot;block&quot;;
  }
  if (elmtRef.options[elmtRef.selectedIndex].value == &quot;OTHER&quot;) {
    document.getElementById(&quot;theOther&quot;).style.display=&quot;block&quot;;
  }
}
</script>
<table width=&quot;100%&quot; bgcolor=&quot;#ffffff&quot;>
<tr>
<td>
<select name=&quot;REF&quot; onChange=&quot;showOther(this)&quot; id=&quot;refList&quot;>
<option value=&quot;OC&quot;>I am Previous Customer</option>
<option value=&quot;KNEW&quot;>Heard of Atlas</option>
<option value=&quot;REF-BY&quot;>Referred by... (Add Below)</option>
<option value=&quot;AS&quot;>Atlas Sticker</option>
<option value=&quot;YPH&quot;>Yellow Pages</option>
<option value=&quot;D/C&quot;>Diamond Certified</option>
<option value=&quot;GSG&quot;>Good Service Guide</option>
<option value=&quot;CHK-BK&quot;>Consumer Checkbook</option>
<option value=&quot;UCBParents&quot;>UC Berkeley Parents Network</option>
<option value=&quot;TRUCK&quot;>Saw Atlas Truck</option>
<option value=&quot;INTERNET&quot;>Another Web Site</option>
<option value=&quot;OTHER&quot;>Other... (Add Below)</option>
</select>
</td>
</tr>
<tr id=&quot;theOther&quot; style=&quot;display:none;&quot;>
<td>
Add Reference:<br>
<input type=&quot;text&quot; name=&quot;REF-BY/OTHER&quot;>
</td>
</tr>
</table>
Thanks! This works great for popping in a text box when the user selects Referred By or Other. .:TUCK:.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
916
xwb
xwb
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
307
feherke
feherke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
817
malpa
malpa
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
berkshirea
  • Locked
  • Question
Dropdown, Select, Required 1
Replies
8
Views
488
berkshirea
berkshirea

Part and Inventory Search

Sponsor

Back
Top