I know that we can do this...
but I was wondering if there is a way to use onFocus to point at an existing class in a stylesheet?Code:onfocus="this.style.border='2px solid #000000'"
for example:
?Code:onfocus="this.style.class=''textfield'"
Printable View
I know that we can do this...
but I was wondering if there is a way to use onFocus to point at an existing class in a stylesheet?Code:onfocus="this.style.border='2px solid #000000'"
for example:
?Code:onfocus="this.style.class=''textfield'"
try
Code:onfocus="this.className='textfield'"
No dice. Any other ideas?
Okay, here's a better explaination of my error:
I have javascript validator on my form on this page:
deleted.com/buyers/prequalify2.asp
There is a stylesheet on this page that has a class called "textfields" that i use on my input fields for forms. Originally, this class did not have a background image, just a background-color (light red)
When the user submits the form and comes up with an error, the javascript will change the input fields background-color to a bright red, letting them know that there is an error at that field.It worked great until...
I added a background image to that class "textfields". The forms look great now with the background on the input fields; however, when the user generates an error, the input field no longer turns yellow. I believe it has to do with the internal javascript I wrote using onfocus and onblur [see below], in the input fields. The onblur creates a thick black border around the input field when the user clicks on it (allows them to know they have that field selected) and the onblur removes the thick border to let them know they are no longer in that input box.
Here is the class in the global stylesheet:
and here is the onblur code that is screwing everything up:Code:.textfields {background-position: left top; background-image:url('/forum/templates/Classic/images/common/cell-background.gif'); background-repeat:no-repeat; background-attachment:fixed; border: 1px solid #000000; cursor: url('/cursor.cur'); color: black; font-family: "trebuchet ms",tahoma, verdana, helvetica, arial; font-size: 11px; line-height: normal; text-decoration: none;}
Any ideas on how to get my input fields to turn yellow on error and how to get onblur to retrieve the original text style?Code:onfocus="this.style.border='2px solid #000000'" onblur="this.style.border='1px solid #000000'"
Here's the page throwing the error:
deleted.com/buyers/prequalify2.asp
Perfect example is I turned the class off on the very field input field, "first name". The rest of them have the class still on. If you fill out nothing on the form, only the input field mentioned above will turn yellow.
EDIT: ---
Also, the validation script is the one that triggers the yellow color.
Here's a snippet from validate.js: (deleted.com/_server-side/forms/validate.js) and or qforms.js
Code:// this is background color style to use when a form field error has occurred
this.errorColor = "yellow";
// the style attribute to adjust when throwing an error
this.styleAttribute = "backgroundColor";
Please don't double post the same problem.
Now, on your page, I don't see any background image on the input fields. Is it still supposed to be there?
it is there, it is a light fade. here it is: http://deleted.com/forum/templates/C...background.gif
on deleted.com/buyers/prequalify2.asp\the first field has no class on it, the rest do (meaning the first one doesnt have a background on it and the rest do)
aslo, if you use google toolbar and it's preset to fill forms for you, it will take over the style on those forms to let you know it can fill them in.
bump
No bumpy!
I don't know where you are with this now, this works, but as you've pointed out it is overidden by the google toolbar! It seems to be the label beside the control that google looks at, so as I've done here I've changed the label from Name to FName and it no longer recognises it, therefore you just need a way of conning the toolbar, either have a different label or use an image as a label?
Hope this helpsCode:<html>
<head>
<title>TEST Page 2</title>
<style>
.normal { background-color: #cccccc; color: #000000; }
.focus { background-color: #ffff00; color: #000000; }
</style>
<script type="text/javascript">
function toggleColor(objElement){
if (objElement.className=='normal'){
objElement.className='focus';
}else{
objElement.className='normal';
}
}
</script>
</head>
<body onload="document.myFrm.txtName.focus()">
<form name="myFrm" id="myFrm" method="post">
<table border="0">
<tr>
<td align="left">FName: </td>
<td>
<input name="txtName" id="txtName" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
</td>
</tr>
<tr>
<td align="left">Address</td>
<td>
<textarea name="txtAddress" id="txtAddress" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
<input type="reset" value="Reset" class="normal" onblur="toggleColor(this)" onfocus="toggleColor(this)">
</td>
</tr>
</table>
</form>
</body>
</html>
Cheers Al
So does this -
Code:<html>
<head>
<title></title>
<style>
.focus{border:2px solid #000000;}
</style>
</head>
<body>
<form name="myFrm" id="myFrm">
<p>1st Box: <input type="text" name="txtText1" id="txtText1" value="test 1" onfocus="this.className='focus'" onblur="this.className=''"></p>
<p>2nd Box: <input type="text" name="txtText2" id="txtText2" value="test 2" onfocus="this.className='focus'" onblur="this.className=''"></p>
</form>
</body>
</html>
aconybeare,
I used your method because I liked the ability to stuff the .focus style into a stylesheet and shorten the onblur link also.
One problem though:
now that i moved the focus to the stylesheet, when you onblur the text field grows past the size=35 that I specified.
Click on a input box to see what im talking about. Is there a way to stop this?
deleted.com/buyers/relocation.asp
Quote:
Originally Posted by aconybeare
Hi,
The problem appears to be in your ".textfields" class. If you comment out the following two lines -
the problem goes away, I don't know why; it's beyond the scope of my knowledge. Replace your "textfields" class with this and try it.Code:FONT-SIZE: 11px;
FONT-FAMILY: "trebuchet ms",tahoma, verdana, helvetica, arial;
Regards AlCode:.textfields
{
BORDER-RIGHT: #000000 1px solid;
BACKGROUND-POSITION: left top;
BORDER-TOP: #000000 1px solid;
/*FONT-SIZE: 11px;*/
BACKGROUND-IMAGE: url(/forum/templates/Classic/images/common/cell-background.gif);
BORDER-LEFT: #000000 1px solid;
CURSOR: url('/cursor.cur');
COLOR: black;
LINE-HEIGHT: normal;
BORDER-BOTTOM: #000000 1px solid;
BACKGROUND-REPEAT: no-repeat;
/*FONT-FAMILY: "trebuchet ms",tahoma, verdana, helvetica, arial;*/
TEXT-DECORATION: none
}
without actually trying it yet, rather than comment them out, I bet if i added them to the new .focus class name i created, it would fix the problem. Im going to go try now...
yep, that fixed it. Thanks for the insight. Im certain the answer wasn't above you, just overlooked.