Change BG of styled select field

**elektrobank** · 09-15-2011, 04:29 PM

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?

**jscheuer1** · 09-15-2011, 04:49 PM

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.

**elektrobank** · 09-15-2011, 10:02 PM

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?

**jscheuer1** · 09-15-2011, 11:53 PM

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>

**elektrobank** · 09-16-2011, 03:44 PM

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!

**Minos** · 09-16-2011, 04:18 PM

Code:

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

**jscheuer1** · 09-16-2011, 04:43 PM

Originally Posted by Minos

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.

Thread: Change BG of styled select field

Thread Tools

Search Thread

Change BG of styled select field

Bookmarks

Bookmarks

Posting Permissions