[Kaklz]

Hello again, all. I love coming up with funny little quirks, so I thought I'd throw this one at ya:
I am making a page that uses Javascript to put a three-page form into one page, flipping thru the pages and then submitting it.
The Javascript and CSS I wrote hide the other two pages while one is being looked at/filled out.
Works great. Problem is, I was employing a similar JS method on one page of the form, which hides most of it until certain options are selected, like so:
Sample
Unfortunately, this is mixed with some CSS which has the value "visibility:visible", which I believe is bypassing the JS "hide" command (in a nutshell, that radio button form in the "sample" don't work no more, and I think this is the problem). Please take a look, and see if there's s/g I'm missing and/or need to improve (and forgive if the JS or HTML is sloppy. Haven't quite gotten the hang of it):
Uckfay.
Thanks in advance!

[djeglin]

Right... There's several things that you are doing wrong here...

1. You shouldnt use inline scripting... Ever. Keep all your script outside your html. Don't even use onclick triggers etc... Those can be set in JS too... All you need then is an onload event at the end of your JS file (You'll need to learn about unobtrusive scripting... Do a google search for it and you'll turn up thousands of results)
2. You're using inline styling. This is *BAD*. The principle behind xhtml and css is that you should separate content, presentation and functionality. Don't put 'style="display:visible"' in your html. Asides from anything else, yes... It will cause you problems with any show/hide scripts, because inline CSS styling like that overrides everythign else.
3. Don't change the display attribute with your JS. This is harder to maintain, and ultimately, more prone to breaking. Instead, make an extra css class that hdies the element and have the JS change the classname of its target element. Its quicker, easier for you and others to read and edit the script, and avoids potential problems (As when JS directly changes style attributes, it does it by essentially injecting inline styling)
4. Don't use tables. I know you said you are learning, but if I were you, I would learn the right way. What you've got there isn't strictly speaking tabular data, so why code it as such? Its not difficult to make the move to creating semantically correct xhtml... Take a look at HTML and CSS Tutorials, References, and Articles | HTML Dog for some tutorials to point you in the right direction

All that having been said, it actually appears to work ok for me here. I'm getting a javascript error at some point... Script is looking for an id starting with a #... Although thats how you notate it in your css, the # isn't part of the id though. Other than that... It works.

Hope all that helps. Didn't mean to be too critical, so don't take offence... Just trying to help you head in the right direction... Its awful to learn something one way then have to relearn because you find out you've been doing it wrong all this time...

Cheers

David

[Shiro]

Don't even use onclick triggers etc...

Do you mean that you shouldn't use the onclick event trigger in (x)html elements?! I didn't even know you could do that. How does it work?

[djeglin]

You can set up a javascript to get elements with a particular attribute... For example, get all <span> elements with a rel attribute of "popup" or something. From there, you can assign the actions it needs as onclick, onfocus etc directly in the js.

[Shiro]

Here is the code I've used up 'til now:

<input type="submit" value="submit" onClick="javascript: someFunction()" />

I'm thinking you mean that I can do this instead (set to run onLoad):

var target = document.getElementById("classybitch");
target.onClick("someFunction()");

<input type="submit" id="classybitch" value="submit" />

Is that right?

[djeglin]

yeah... along those lines. You don't necessarily need to use IDs... you can combine methods to get other results... for example:

to get all <span> elements with a classname of "popup" within a div with an id "sidebar":

function getElements () {
  var sidebar = document.getElementById("sidebar");
  var targets = sidebar.getElementsByTagName("span");
  var x = 0;  /* Always declare your variables, this one is to count through the spans*/
  for (x=0; x < targets.length; x++) {
    var classname = targets[x].className;
    if (classname == "popup") {
      makePopups(targets[x]);
    }
  }
}

function makePopups (target) {
  target.onClick = /* Your onclick action here etc */
}

[Shiro]

Thanks, I think I get that. Interesting, thanks. That was a good thing to learn!

[Kaklz]

Djeglin, thank you for the critique and no, I didn't take offense to any of it. It helps to know what I'm doing wrong (even if it's almost everything ).
Do you know of any way that I can make it work with what I've got, though? I'm trying to first just get the site up (everything is done except for this form) and then go through and fine-tune everything, semantically speaking.
It's not an overly-remarkable site, so it won't matter if it's not all pretty in pink when it's up, and then I can go about perfecting it as I learn. I just need it up . Thanks in advance again!

[djeglin]

Like I said Kaklz, for me it seemed to work in FF and IE7... didnt test in IE6, safari etc, but still...

[Kaklz]

Is it hiding the Radio buttons until you make a selection in the first group, like here? Doesn't work for me in FF.

[Shiro]

djeglin:

I wrote some code along the lines of what you explained, but I've run into one issue - where do I call the function getElements()? Do I call it with onLoad in the body tag?

[Shiro]

I think I figured it out. Here's how to do it if anyone else cares:

window.onload=function(){
 getElements();
}