Results 1 to 7 of 7

Thread: Change BG of styled select field

  1. #1
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Change BG of styled select field

    I'm using a styled select field (<select name="name" class="styled">)

    If I put this:

    var c = document.getElementsByName("mySelectBox")[0];
    c.style.backgroundColor = "#fdd";
    c.style.borderColor = "#f66";

    in my onload handler it changes the BG color properly.

    But if I call that from my validation function when the form is submitted, the background color of the select box doesn't change, only the items in the dropdown actually change color. If I make this a non-styled field it works fine.

    Any ideas?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    There are so many possibilities, we would really need more to go on. Please either put up a demo of the problem and provide a link to it, or post enough code where we can copy and paste it to see the problem.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    This works and will turn the pulldown menu red when the page shows:

    Code:
    <body>
    
    <select name="date" class="styled">
    <option value="">---</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    </select>
    
    <script>
    $.each(document.getElementsByTagName("select"),function(a,b){b.style.backgroundColor="#fdd";b.style.borderColor="#f66"});
    </script>
    
    </body>
    If I change it so that it changes the color of the pulldown in response to pressing the submit button, it won't change the color of the pulldown menu itself, but when you click the menu all the items will be red. This is basically a validation that will turn the items in the form red if they need to be corrected.

    Code:
    <body>
    
    <script>
    
    $("#form_signup").live("submit", function() {
    
       $.each(document.getElementsByTagName("select"),function(a,b {b.style.backgroundColor="#fdd";b.style.borderColor="#f66"});
    
    };
    
    </script>
    
    <form id="form_signup" action="" method="post">
    
    <select name="date" class="styled">
    <option value="">---</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    </select>
    
    
    <input type="submit" value="Go" />
    
    </form>
    
    </body>
    If I take out 'class="styled"' from the code it works properly in both cases though, but of course I don't get the pulldown menus looking how I want them to. Any suggestions on how I can get this working?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    From the use of $.each in the code I'm assuming jQuery. Is that correct?

    If so, there are a number of typos and/or errors in the second bit of code. Give this a try:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
    <body>
    <script>
    $("#form_signup").live("submit", function(e){
       e.preventDefault();
       $.each(document.getElementsByTagName("select"),function(a,b){b.style.backgroundColor="#fdd";b.style.borderColor="#f66"});
    });
    </script>
    <form id="form_signup" action="" method="post">
    <select name="date" class="styled">
    <option value="">---</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
    </select>
    <input type="submit" value="Go" />
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What did you change exactly? All I see different is that you added the 'e' to the function and e.preventDefault();. I added those and it didn't make a difference.

    The rest of the HTML you had added I had purposely left off my post to keep it short, but I do have all that in there already.

    Thanks!

  6. #6
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    Code:
    $("#form_signup").live("submit", function(e){
       e.preventDefault();
       $.each(document.getElementsByTagName("select"),function(a,b){b.style.backgroundColor="#fdd";b.style.borderColor="#f66"});
    });
    Verzeihung!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Minos View Post
    Code:
    $("#form_signup").live("submit", function(e){
       e.preventDefault();
       $.each(document.getElementsByTagName("select"),function(a,b){b.style.backgroundColor="#fdd";b.style.borderColor="#f66"});
    });
    At least, um that's two (red in the above quoted were missing from the original posted code). My impression was that there were a number of typos and/or errors, so many I lost track. But it may have been just those, thinking back I believe I misunderstood the situation at first.

    In any case, rather than trying to fix your broken code, I suggest running the page as is from my previous post. Add your other stuff to it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •