PDA

View Full Version : 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:



<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.




<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:


<!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
$("#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
$("#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.