How to get the background color of a form field

**deweyhtucker** · 07-04-2010, 02:17 PM

I have built a spry widget form where the submit button is at the bottom of the page, and all my required fields are at the top of the page. The problem for a user is that when it is submitted and there is an error in a required field, it seems that nothing happens. Only by scrolling back up to the top of the page will they see the error field.
What I would like to do is test for the background color of the field and if it is not the good field color, then have an alert tell them which field is invalid.
The code I'm trying occurs on the submit operation.

My form is named addForm. Here is what I have.
<form method="POST" action="Admin/DataSave.html" name="addForm" onSubmit="return fieldErrors()">

This is the function to run on the onSubmit.
The span id for the field where you enter your name is sprytextfield1. If this field validates then the spry widget gives the field the background color of #B8F5B1.

<script type="text/javascript">

</script>

Where am I going wrong?
I'm a newbee to scripting.
Thanks for any help.

**Nile** · 07-04-2010, 03:02 PM

Whats the ID of the field? sprytextfield1?
You have to do something like this: element.style.backgroundColor
So if the id is sprytextfield1, try:

Code:

var theBgd = document.getElementById("sprytextfield1").style.backgroundColor;

**vwphillips** · 07-04-2010, 03:28 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<style type="text/css">
<!--
#t2 {
  background-Color:#B8F5B1;
}

-->
</style>
<script type="text/javascript">
<!--

function fieldErrors(id,hex) {
 var fld=document.getElementById(id),theBgd = zxcRGBtoHex(zxcSV(fld,'background-Color'));
 if(theBgd != hex.toLowerCase()){
  alert("Oops, there is an error with your\n"+fld.title);
  return false;
 }
}

function zxcSV(obj,par){
 if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
 return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}


function zxcRGBtoHex(zxcrgb){

 if (zxcrgb.charAt(0)=='#'){
  return zxcrgb.toLowerCase();
 }
 if (zxcrgb.charAt(0)=='r'){
  zxcrgb=zxcrgb.replace('rgb(','').replace(')','').split(',');
  return '#'+zxcHex(zxcrgb[0])+zxcHex(zxcrgb[1])+zxcHex(zxcrgb[2]);
 }
 return '';
}

function zxcHex(zxcnu) {
 if (zxcnu==null) return '00';
 zxcnu=parseInt(zxcnu);
 if (zxcnu==0||isNaN(zxcnu)) return '00';
 zxcnu=Math.max(0,Math.min(zxcnu,255));
 var zxchex='0123456789abcdef';
 return zxchex.charAt((zxcnu-zxcnu%16)/16)+zxchex.charAt(zxcnu%16);
}

//-->
</script>
</head>

<body>
<input title="First Name Field" id="t1" name="">
<input title="Last Name Field" id="t2" name="">
<script type="text/javascript">
<!--
 fieldErrors('t1','#B8F5B1');
 fieldErrors('t2','#B8F5B1');
//-->
</script></body>

</html>

some browsers use hex some upper case some lower case some rgb for colors

**jscheuer1** · 07-04-2010, 03:34 PM

That will never work. When you ask the browser for the style.backgroundColor of anything, assuming it has one that was set by javascript or inline (background-color set in a stylesheet is unavailable with this method), the browser may respond with either the hex value (using upper or lower case letter where applicable) or the rgb(###, ###, ###) value. Other methods are available and may in some cases be used.

Now your spry widget may set the color using javascript, or simply set it by adding/changing a class name. If the former, there is no guarantee that the browser will report the value in the same format as spry set it in (this actually varies by browser), if the latter, the value will be unavailable using the method under discussion here.

A far better approach would be to use the spry widget's own code to determine which entry is invalid. It must already be doing this in order to make the input appear with a different background color. It probably even has an option to use this information as you see fit.

Where did you get the code for this widget?

**vwphillips** · 07-04-2010, 04:00 PM

That will never work.

the code I posted accounts for hex,upper case,lower case and rgb

and for inline and class name background color assignment

**jscheuer1** · 07-04-2010, 06:26 PM

Originally Posted by vwphillips

the code I posted accounts for hex,upper case,lower case and rgb

and for inline and class name background color assignment

Sorry Vic. We cross posted. I was still composing my post while you responded.

My post was in response to Nile and deweyhtucker, not to you.

I still think the most efficient way here would be to piggy back on the widget's own method for validating the inputs, thus bypassing any need to determine the background color. It's likely that the widget already has a hook for doing so. Even if it doesn't, it shouldn't be too hard to create one. But of course, like I said, we would need a link to the widget (or at least its code) to determine that. Preferably to its demo page, where hooks should be listed.

Also, it's always possible, even though you appear to have all the bases covered, that a browser and/or the widget itself might throw you a curve on that.

Nice coding on getting the computed/current style - most efficient approach I've seen on that yet.

Thread: How to get the background color of a form field

Thread Tools

Search Thread

How to get the background color of a form field

Bookmarks

Bookmarks

Posting Permissions