?
Solved

hide form field when form check box is checked.

Posted on 2009-07-06
12
Medium Priority
?
1,033 Views
Last Modified: 2012-06-27
I have a form When the check box field is checked I want the menu field to gray out or hide.
Bellow is a test form. Can you show me how this is done?
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" id="parent" />
      Is Parent</label>
  </p>
  <p>
    <label>Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Open in new window

0
Comment
Question by:jbrashear72
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +3
12 Comments
 
LVL 12

Expert Comment

by:kevin_u
ID: 24789642
I added an ID to the label and the onclick attribute.

Should be what you wanted.
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" id="parent" 
      onclick="document.getElementById('parent_label').style.display = (this.checked)?'none':''"/>
      Is Parent</label>
  </p>
  <p>
    <label id="parent_label" >Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Open in new window

0
 
LVL 2

Expert Comment

by:grvulture
ID: 24789694
which menu field?? there is no field named "menu" there.... anyway, If I got it right you want to hide the <select> element... so here it goes...


    <script type="text/javascript">
    function setVisible() {
      if (document.getElementById('parent').checked) {
         document.getElementById('menu').style.display='none';
      } else {
         document.getElementById('menu').style.display='block';
      }
    }
    </script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" id="parent" onclick="setVisible();" onkeypress="this.onclick();" />
      Is Parent</label>
  </p>
  <div id="menu">
    <label>Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </div>
etc...

Open in new window

0
 
LVL 8

Expert Comment

by:lharrispv
ID: 24789739
That is basically the approach I would have taken but rather then do the document.getEle... in the actual onClick I woudl ahve called a funtion.  That way you can write something like this:

function hidebox {
if (document.form1.parent[0].checked) {
      document.getElementById('parent_label').style.display = 'none':
         }
then in your onClick you call hidebox

That way you can also add code so that when the box is unchecked the other one comes back
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:jbrashear72
ID: 24789796
Looks really good. I tried to add it to the actual form I am working in and I could only get it to hide either the label text or the drop down select.

Here is the form I was working in:
<td class="KT_th"><label for="parrent_<?php echo $cnt1; ?>">Is Parent:</label></td>
                      <td><input  <?php if (!(strcmp(KT_escapeAttribute($row_rsaccounts['parrent']),"Y"))) {echo "checked";} ?> type="checkbox" name="parrent_<?php echo $cnt1; ?>" id="parrent_<?php echo $cnt1; ?>" value="Y" onclick="document.getElementById('parent_label').style.display = (this.checked)?'none':''"/>
                      <?php echo $tNGs->displayFieldHint("parrent");?> <?php echo $tNGs->displayFieldError("accounts", "parrent", $cnt1); ?></td>
                    </tr>
                    <tr>
                      <td class="KT_th"><label for="parent_id_<?php echo $cnt1; ?>">Select Parent:</label></td>
                      <td><label id="parent_label"><select name="parent_id_<?php echo $cnt1; ?>" id="parent_id_<?php echo $cnt1; ?>">
                        <option value=""><?php echo NXT_getResource("Select one..."); ?></option>
                        <?php 
do {  
?>
                        <option value="<?php echo $row_parentlist['id']?>"<?php if (!(strcmp($row_parentlist['id'], $row_rsaccounts['parent_id']))) {echo "SELECTED";} ?>><?php echo $row_parentlist['description']?></option>
                        <?php
} while ($row_parentlist = mysql_fetch_assoc($parentlist));
  $rows = mysql_num_rows($parentlist);
  if($rows > 0) {
      mysql_data_seek($parentlist, 0);
	  $row_parentlist = mysql_fetch_assoc($parentlist);
  }
?>
                      </select></label>

Open in new window

0
 
LVL 6

Accepted Solution

by:
ahmad2121 earned 2000 total points
ID: 24789809
This is how I would do it.
    <script type="text/javascript">
    function toggleMenu(checked) {
      if (checked) {
         document.getElementById('menu').style.display='none';
      } else {
         document.getElementById('menu').style.display='';
      }
    }
    </script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" onchange="toggleMenu(this.checked)" id="parent" />
      Is Parent</label>
  </p>
  <p>
    <label>Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Open in new window

0
 
LVL 3

Author Comment

by:jbrashear72
ID: 24789822
you guys are awesome!
0
 
LVL 2

Expert Comment

by:grvulture
ID: 24789876
jbrashear72, if you use my solution you will be able to hide/display all the menu, not only the label, or the select
0
 
LVL 12

Expert Comment

by:kevin_u
ID: 24789907
You have multiple objects to deal with... as well as a tr/td.. we need to id the whole thing:

change the onclick to:
onclick="document.getElementById('parent_row_<?php echo $cnt1; ?>').style.display = (this.checked)?'none':''

On the table row th
<tr>
    <td class="KT_th"><label for="parent..........

<tr id="parent_row_<?php echo $cnt1; ?>">
    <td class="KT_th"><label for="parent..........

0
 
LVL 3

Author Comment

by:jbrashear72
ID: 24789914
Yea I would rather hide the table row.
0
 
LVL 6

Expert Comment

by:ahmad2121
ID: 24789978
Check that out. Moved the id to the p tag, now it will hide the entire p tag.

Also try using divs rather than p's. p's have a lot of default styling which you have to reset.
    <script type="text/javascript">
    function toggleMenu(checked) {
      if (checked) {
         document.getElementById('menu').style.display='none';
      } else {
         document.getElementById('menu').style.display='';
      }
    }
    </script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" onchange="toggleMenu(this.checked)" id="parent" />
      Is Parent</label>
  </p>
  <p id="menu">
    <label>Select Parent:
      <select>
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Open in new window

0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24798872
Here is another version (using Jquery)

I used your sample form.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Simple Show Hide Project</title>
            <script language="JavaScript" src="lib/jquery/jquery-1.3.2.min.js">
            </script>
    </head>
    <body>
        <h1>New Web Project Page</h1>
            <form id="form1" name="form1" method="post" action="">
              <p>
          <label>
            <input type="checkbox" name="parent" id="parent"
             onchange="if (this.checked) { $('#parent_sh').show()} else { $('#parent_sh').hide()}" />Is Parent</label>
              </p>
              <p id="parent_sh" style="display:none;">
          <label>Select Parent:
            <select name="parent_id" id="parent_id">
              <option value="4">Marvel Comics</option>
              <option value="3">DC Comics</option>
              <option value="2">Lost</option>
              <option value="1">Heros</option>
            </select>
          </label>
              </p>
              <p>
          <label>Account Number:
                  <input type="text" name="name" id="name" />
          </label>
              </p>
              <p>
          <label>
            <input type="submit" name="submit" id="submit" value="Submit" />
          </label>
              </p>
            </form>
    </body>
</html>
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 24997326
Did you try any of my solutions ?

0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question