HTML field with 2 class= references

jasonyoung

My HTML text fields are sized by the class="style7" statement but I also have a dependency validation routine in JS which required another class statement in the text field. Only the first class= statement is observed. Is there a way to allow multiple class= references in the same text field?

Here's what I'm up against:

<label><input name="ccsdongle" type="text" class="DEPENDS ON ccscheck" <?php if($rights<=2) echo "readonly=\"true\""; ?> onkeypress="return handleEnter(this, event)" class="style7" id="ccsdongle" tabindex="14" value="<?php echo $ccsdongle; ?>" size="5" maxlength="5"/></label>

Thanks!

rajug

Actually i have not come to undestand what you exactly want but here is i have changed your code for example:

<input name="ccsdongle" type="text" class="<?php if($ccscheck == 'abc'){echo 'class1';}else{echo 'class2';}?>" <?php if($rights<=2) echo "readonly=\"true\""; ?> onkeypress="return handleEnter(this, event)" class="style7" id="ccsdongle" tabindex="14" value="<?php echo $ccsdongle; ?>" size="5" maxlength="5"/></label>

does this make sense?

jasonyoung

Not quite. The class="DEPENDS ON ccscheck" is a javascript reference and the class="style7" is a CSS reference. They have no connection to either of the two PHP references.

Unfortunately CSS and the JScript both use the class="....." syntax and only the first is being observed.

Does this help? Thanks.

rajug

I still could not get what you mean. The class in a tag is always a css class right? then you mean you want to control the class name to used in the tag by your javascript code. am i right? if so that seems to be like not to use php even.

Can you give an example?

jasonyoung

Lets take a step back. If you were to write an HTML text field like

<input name="netcheck" type="text" id="netcheck" class="style7" value="1">

then the class= reference would imply use CSS style 7.
But if I were to write this

<input name="netcheck" type="text" id="netcheck" class="style7" class="style10" value="1">

then the first class= (style7 in this example) would be observed.

What I have instead is a JavaScript reference using the 'class=' syntax and this seems to be conflicting with the CSS 'class=' tag.

Does the problem make sense. I know it isn't working, so surely there's something incorrect with two class= references i the same field.

rajug

In which condition you want to change/append/add the another class name? do simply append another class name in the same inline like this:

<input name="netcheck" type="text" id="netcheck" class="style7 style10" value="1">

Does this make any sense now?

jasonyoung

That's fine, but I don't need two class="styles". One class= has to call the JS and the other has to call the CSS formatting. Look back at my first post and you'll now see what I mean.

I've tried putting them together like you suggest, separating with semicolons and all sorts of failing combinations. Maybe PHP isn't able to do what my brain wants it to or maybe I just haven't found the correct string to make t all work.

Weedpacket

rajug's example is exactly the mechanism for assigning multiple classes to an element (.foo{...} is equivalent to [class~="foo"]{...}, at least on clients that understand enough of the CSS selector syntax).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
.style7{font-weight:bold;color:red;}
.style10{text-decoration:underline;}
</style>
</head>
<body>
<div class="style7 style10">This is red, bold, and underlined</div>
</body>
</html>

If your Javascript code isn't properly parsing the class attribute then that is what's at fault.

Incidentally, you can give an element any property you want in Javascript (you don't have to keep reusing the class attribute):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function valid(field)
{
  if(field.wibble!=undefined)
   {
    alert(field.wibble);
   }
}
//-->
</script>
</head>
<body>
<form action="#"><input type="button" id="field3" onclick="valid(this);" value="This has an extra attribute"> <script language="JavaScript" type="text/javascript">
<!--
t=document.getElementById('field3');
t.wibble = "HITHERE!";
//-->
</script></form>
</body>
</html>

jasonyoung

Sorry to post in the Coding forum -- didn't think this was a client-side issue.

I posted a stripped copy for you to see what I'm doing.

http://www.itsandiego.net/dev/invInterview90.php

Maybe this will help. I understand what you're both saying about the way to assign multiple classes, just unsure where to go from here. I've tried as you suggested but the result is always the same.

I like the idea of using a different identifier to call the JS instead of using class="DEPENDS ON ...", but I don't know how to do this. I've looked in the two files which make this page happen and the word class only appears once sooooo, I thought maybe if I provided the source files to this issue it could help towards a resolution.

The goal is if a check box is selected, the assocoated text box would appear to the right with style7 applied. Both examples have the HTML code to their right also.

Example 1 does the JS stuff, but will not assign style7, too.
Example 2 does not do the JS stuff, but does assign style7.
I want them to do both.

Thanks Guys!

JPnyc

You can use up to 2 classes separated by a space class="class1 class2" then both will be observed.

Weedpacket

At a single quick glance it looks like the bits you'd change are the FORM_MANAGER_* strings at the top to things that don't contain spaces, and then change the places where it searches for them so that e.g., "(f[j].indexOf(FORM_MANAGER_DEPENDS) === 0) " becomes "(f[j].indexOf(FORM_MANAGER_DEPENDS) !== -1) " so that the things can appear anywhere in the class attribute value, not just at the start.

jasonyoung

Thanks Weed, I tried your mods and it reacted backwards from normal, but that gave me an idea. Including both class attributes in the same class call with the style7 being first, the validation logic in the JS only observed the second dependency. The good news was it did style the field appropriately. Sooo, I added a hidden field, made it true, and made it the first validation check and then did the original validation check. It worked!!! So bonered now! Here's what I had to do.

<input name="ccsdongle" type="text" class="style7 DEPENDS ON bs AND DEPENDS ON ccscheck AND DEPENDS ON dongleYes" id="ccsdongle" tabindex="14" onKeyPress="return handleEnter(this, event)" value="<?php echo $ccsdongle; ?>" size="5" maxlength="5" <?php if($rights<=2) echo "readonly=\"true\""; ?>/>

bs is the hidden field set to true. For some reason it has to be there. I'm quite sure its not the right way to do this and digging into the JS further would make it cleaner, but I've spent too much time on visual styling which I doubt the intended users will ever notice.

Thanks for sticking through this and helping Weed and Rajug!

Weedpacket

Glad you got it working; I'd never thought of using classes for that sort of thing (though it is suggested as a possibility in the specification). Is there any particular reason you called the hidden field "bs" or did that just seem like the right thing to call it 😃?

jasonyoung

Weedpacket wrote:
Is there any particular reason you called the hidden field "bs" or did that just seem like the right thing to call it 😃?

After jacking around with this for so long, and the hidden field being the resolution, I figured bs was appropriate. Plus the next guy to follow along behind me probably won't catch on to the meaning. He would if I named it what I originally wanted to, though! :evilgrin: