SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: IfSelected??

  1. #1
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IfSelected??

    Hello All:

    I need to write a JS snip that will change the css of a certain field on a form if a certain dropdown is selected.

    I have a dropdown of all US States however, if OUTSIDE US is selected and people click submit,

    I need to trigger a CSS that will highlight the Providence Form so they know what they did not fill out.

    Any help on this would be appreciated,

    Paul
    ********
    Regards,

    P

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    show('states').when('country').is('US');
    show('provinces').when('country').is('Canada');
    That pretty much sums up the logic you need (theoretically). As for a real implementation, you need to listen to the dropdown 'change' event.

    Code:
    <select id="country">
      <option value="states">US</option>
      <option value="provinces">Canada</option>
    </select>
    <div id="groups">
      <select id="states">
        <option>Alabama</option>
        <option>Alaska</option>
        <option>Arizona</option>
        ...
      </select>
    
      <select id="provinces">
        <option>BC</option>
        <option>Ontario</option>
        ...
      </select>
    </div>
    JavaScript might look like this:
    Code:
    <script>
    function show(group) {
      var groups = document.getElementById('groups').getElementsByTagName('select');
      for ( var i=groups.length-1; i >=0; --i ) {
        groups[i].style.display = 'none';
      }
      var el = document.getElementById(group);
      el.style.display = 'block';
    }
    applyBehavior() {
      var el = document.getElementById('country');
      el.onchange = function() {
        show(this.options[this.options.selectedIndex].value)
      };
    }
    </script>
    Last edited by polvero; Nov 29, 2007 at 20:21. Reason: code is presumptuous

  3. #3
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Polvero:

    I think I need to brush up on my JS before I venture into this. Might be a bit over my head right now what I want to accomplish.

    Thanks for the advice and offer to help though,

    Paul
    ********
    Regards,

    P

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Polvero,

    I appreciate your effort but that is not what I wanted.

    I needed the pages css to change when something in the dropdown was selected.

    I have an online shopping cart that does not detect when outside US is selected that we need the providence filled in as well, so I was trying to use a css highlight effect but only when outside US is selected from a drop down.

    Thanks again for your help,

    Paul
    ********
    Regards,

    P

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use the same logic then.
    Code:
    <style>
    body.us {
      background: orange;
    }
    body.can {
      background: yellow;
    }
    </style>
    
    <select id="example">
      <option value="us">US</option>
      <option value="can">Canada</option>
    </select>
    
    <script>
    var el = document.getElementById('example');
    el.onchange = function() {
      // do what it is you wanted to do
      var value = this.options[this.options.selectedIndex].value;
      document.body.className = value;
    };
    </script>

  7. #7
    SitePoint Guru tombempty's Avatar
    Join Date
    Oct 2001
    Location
    New York
    Posts
    688
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Polvero,

    That seems to give me a direction now in the way to go with this.

    Paul
    ********
    Regards,

    P


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
  •