selecting an option changes the availablity or other option in the for

Page 1 of 1

1 Replies - 212 Views - Last Post: 05 March 2009 - 11:41 PM

#1 jason-pc  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 60
  • Joined: 10-January 09

selecting an option changes the availablity or other option in the for

Posted 05 March 2009 - 11:05 PM

i wish to have options show or not show depending on the options selected previously

i think i would be right in saying this needs to be client side and think it must be javascript that is needed here. correct me if i am wrong.

either way what method should i use and what is the coding needed to do this.

i have no idea where to start of the sort of code i will need and would appreciate it if some one could start me off so i can add the bits of code to the rest of my form.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form action="" method="get">
  <p>if A has content then B and C are not usable</p>
  <p> A
<input type="text" name="textfield">
  </p>
  <p>&nbsp;</p>
  <p> B
<input type="text" name="textfield3">
  </p>
  <p>&nbsp;</p>
  <p> C 
	<input type="text" name="textfield2">
  </p>
  <p>&nbsp;</p>
  <p>if D is changed or is not the default 'select an option' then E and F are 
	available to alter and add data to the fields E and F</p>
  <p>D
	<select name="select">
	  <option value="default">select an option</option>
	  <option value="opt 1">opt 1</option>
	  <option value="opt 2">opt 2</option>
	</select>
  </p>
  <p>E
	<select name="select2">
	  <option value="opt 1">opt 1</option>
	  <option value="opt 2">opt 2</option>
	  <option value="opt3">opt 3</option>
	</select>
  </p>
  <p>F
	<textarea name="textarea"></textarea>
  </p>
</form>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: selecting an option changes the availablity or other option in the for

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,407
  • Joined: 18-April 07

Re: selecting an option changes the availablity or other option in the for

Posted 05 March 2009 - 11:41 PM

Well first of all, you need to lookup a few items in javascript...

1) put an id attribute on each of the controls you want to manipulate. ids must be unique and an example is listed below. Here we have a textbox with the id of "idhere"

<input type="text" name="mycontrol" id="idhere"/>


2) To access these ids and thus get references to the controls, you have to use the method "getElementById()" of the document class. Lookup the term "document.getElementById()" for examples.

3) To show and hide controls you use the style properties of a control. The ones of interest are "visibility" or "display"

4) Lastly, you need to have some events to trigger the hiding and showing. So if you type in box "A" and want to hide box "B" and "C" then you will need the "onchange" event to detect typing in box "A". So look up the events onchange/onkeydown/onkeypress for textboxes/selects/dropdowns, onclick for buttons and other event handlers for other controls.

Put them together and your button can trigger an onchange event of box "A", calls a function to get references to box "B" and "C" using getElementById, then once you have those references, you can hide and show them by toggling the visibility/display style property.

Look them up, generate some code and come back if you get stuck. :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1