SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show and hide div with select option?

    Example:

    Code HTML4Strict:
    <label>Show div?</label>
    <select>
    <option>yes</option>
    <option>no</option>
    </select>
     
    <div class="show and hide this div when toggling yes and no on selectbox">
    some other select boxes with different options
    </div>

    If someone take the option YES, then div under will show, and if the user changes his option to NO, i want it to be hidden again. In fact I want to make all the options he first choose in the hidden div to be obsolete and don't show in the email output.

    So if he choose NO i don't want the extra fields/options in the hidden div to be shown in the email-output, only if he choose YES and fills them out.

    Hope someone understand what Im trying to convey, my english isn't the best.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    If someone take the option YES, then div under will show, and if the user changes his option to NO, i want it to be hidden again.
    Use onchange to attach an event listener to the select element.

    Example:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Select onchange</title>
        <style>.hidden{ display: none; }</style>
      </head>
      
      <body>
        <label for="mySelect">Show div?</label>
        <select id="mySelect">
          <option>Yes</option>
          <option>No</option>
        </select>
         
        <div id="myDiv">
          <p>Some other select boxes with different options.</p>
        </div>
        
        <script>
        var sel = document.getElementById('mySelect'),
            div = document.getElementById('myDiv');
            
        sel.onchange = function(){
          if (div.className.match("hidden")){
            div.className = "";
          } else {
            div.className = 'hidden';
          }
        }
        </script>
      </body>
    </html>

    So if he choose NO i don't want the extra fields/options in the hidden div to be shown in the email-output, only if he choose YES and fills them out.
    I don't know what you mean by "email-output".
    If you don't want form fields to submit with a form, disable them:

    Code JavaScript:
    document.getElementById('myCheckbox').disabled=true;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •