Page 1 of 1

Chained checkbox

Posted: Thu Aug 09, 2007 2:44 pm
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?

Posted: Thu Aug 09, 2007 3:06 pm
by John Cartwright
Yes.

Hint: onclick() and the css attribute "display"

Posted: Thu Aug 09, 2007 3:20 pm
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?

Posted: Thu Aug 09, 2007 3:22 pm
by TheMoose

Code: Select all

onclick="javascript:document.new_request.l_followup_period.style.display = 'block';"

Posted: Thu Aug 09, 2007 3:25 pm
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.

Posted: Thu Aug 09, 2007 3:37 pm
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';"

Posted: Thu Aug 09, 2007 3:38 pm
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);"

Posted: Thu Aug 09, 2007 3:51 pm
by icesolid
I am getting an error it says object expected.

I have checked to make sure all of my fields are labeled correctly?

Posted: Thu Aug 09, 2007 4:01 pm
by TheMoose
Make sure the onclick portion is in the checkbox, and not your select box.

Posted: Thu Aug 09, 2007 4:27 pm
by icesolid
I have. The onclick is in the checkbox.

Posted: Thu Aug 09, 2007 6:43 pm
by icesolid
I still can not figure it out.

Posted: Thu Aug 09, 2007 7:29 pm
by John Cartwright
Post all relevant code

Posted: Fri Aug 10, 2007 8:04 am
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>

Posted: Fri Aug 10, 2007 8:56 am
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()

Posted: Fri Aug 10, 2007 9:31 am
by icesolid
Problem fixed. Thank you!