Chained checkbox

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Chained checkbox

Post by icesolid »

I would like to have a checkbox, if selected it will show a selection box.

Unchecked the selection box disappears and the values of the selection box are cleared also.

Possible?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Yes.

Hint: onclick() and the css attribute "display"
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

Ok i have this javascript code here in my check box:

Code: Select all

onclick="javascript:document.new_request.l_followup_period.style = '';"
I have this code here for my selection box:

Code: Select all

<select name="l_followup_period" class="orderInput" style="display: none;">
The selection box is invisible. However, when I hit the checkbox it does not appear?
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Code: Select all

onclick="javascript:document.new_request.l_followup_period.style.display = 'block';"
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

When I hit the checkbox it displays the selection box, but when I go back to hit the checkbox the selection box stays. If the checkbox is unchecked I want the selection box to go away and clear the value out of the selection box.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

I have tried this but it is not working:

Code: Select all

onclick="this.form.elements['l_followup_period'].display = this.checked ? '' : 'none';"
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Code: Select all

function updateBox(object) {
	if(object.checked)
		document.new_request.l_followup_period.style.display = 'block';
	else
		document.new_request.l_followup_period.style.display = 'none';
}
..................
onclick="updateBox(this);"
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

I am getting an error it says object expected.

I have checked to make sure all of my fields are labeled correctly?
User avatar
TheMoose
Forum Contributor
Posts: 351
Joined: Tue May 23, 2006 10:42 am

Post by TheMoose »

Make sure the onclick portion is in the checkbox, and not your select box.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

I have. The onclick is in the checkbox.
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

I still can not figure it out.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Post all relevant code
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

Code: Select all

<tr>
  <td class="blueBar">&nbsp;</td>
  <script type="JavaScript">
  function updateBox(object) {
  if(object.checked)
      document.new_request.l_followup_period.style.display = '';
  else
      document.new_request.l_followup_period.style.display = 'none';
  }
  </script>
  <td height="33" class="lightblueBar">&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="l_followup" class="orderInput" onclick="updateBox(this);"><?php if($_POST["l_followup"]) { echo " checked"; } ?> &nbsp;<b>Is this a laundromat follow up survey?</b>&nbsp;&nbsp;&nbsp;
  <select name="l_followup_period" class="orderInput" style="display: none;">
  <option value="3"<?php if($_POST["submit"] && $_POST["l_followup_period"] == "3") { echo "selected"; } if($_SESSION["l_followup_period"] == "3") { echo " selected"; } ?>>Every Three Months</option>
  <option value="6"<?php if($_POST["submit"] && $_POST["l_followup_period"] == "6") { echo "selected"; } if($_SESSION["l_followup_period"] == "6") { echo " selected"; } ?>>Every Six Months</option>
  <option value="9"<?php if($_POST["submit"] && $_POST["l_followup_period"] == "9") { echo "selected"; } if($_SESSION["l_followup_period"] == "9") { echo " selected"; } ?>>Every Nine Months</option>
  <option value="12"<?php if($_POST["submit"] && $_POST["l_followup_period"] == "12") { echo "selected"; } if($_SESSION["l_followup_period"] == "12") { echo " selected"; } ?>>Annually</option>
  </select>
  </td>
</tr>
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

It is:

Code: Select all

<script language="JavaScript">
You have other errors:
1. your echo of "checked" is outside the check box tag;
2. there is no white space between your echo of "selected" and "value" in the option tags;
3. you should use "if ... elseif" instead of two "if"s for echoing "selected"
4. you have not implemented the trigger in the JS function.
5. use document.getElementById()
There are 10 types of people in this world, those who understand binary and those who don't
icesolid
Forum Regular
Posts: 502
Joined: Mon May 06, 2002 9:36 pm
Location: Buffalo, NY

Post by icesolid »

Problem fixed. Thank you!
Post Reply