How hard is this to do…

@mcsNov 12.2004

I’ve seen javascript replacements for checkboxes, with images replacing the standard checks.
I have a project, that I’ve done the php and html for, but I need a checkbox that has more than 2 options. I was wondering if it would be too advanced javascript to have 4 different images POSTing 4 different values. If anyone can do this, please help me out, and join in the project. If you can do it but you don’t want to just tell me its possible and what I need to learn to do it myself please.
Thanks,
Steve

to post a comment

JavaScript

10 Comments(s) _↴

@David_HarrisonNov 12.2004 — #You're talking about creating a totally new form element, this is definately possible but there are a couple of major drawbacks.

Users would not know how to use this new form control, therefore they may be confused and input incorrect data.

For users without JavaScript the new form control would not show up at all and they would not be able to input any data.

I would strongly advise against doing this. Can't you just use existing form controls to do what you want? Perhaps a select box would do the job or maybe a couple of checkboxes.

@mcsauthorNov 12.2004 — #Heres my problem, the point of this project is to save time>>

http://www.mc-steve.com/tabs

It is something that I made for me and a few freinds to be able to tab beats and save them alot faster.

the checkboxes give two options in this page: - , o

which is either dont hit or hit the drum.

What I'm looking for is something that would change with onclick() and could be either: - , o , d , g , x

- for dont hit, o for hit, d for drag, g for ghost note, and x for a cymbal hit.

I would have instructions, and I could use php to check if the user has javascript enabled, and if they dont I would show the original page with checkboxes.

@mcsauthorNov 12.2004 — #Could someone tell me the names of the things I need to learn, or what scripts I should look at before I try to write this script?

@David_HarrisonNov 12.2004 — #Don't worry, I didn't abandon you, I was writing a script. It does pretty much exactly what you want.

The boxes are just div tags with a black border and the letter inside them changes depending on what the user has clicked to.

The boxes are positioned depending on where you have put some hidden input fields a little like the following:<input type="hidden" name="a UNIQUE name" special="yes">They have to be hidden input fields, they have to have special="yes" on them and the name MUST be unique.

The "special" attribute is one that I've just made up now and therefore isn't valid, if you run it through the W3C validator it will spit out an error at you, 'there is no attribute "SPECIAL"'. If that doesn't bother you then great, if it does then I'll try and find another way of marking out your "clickers".

I have arranged the clickers in a similar sort of way to how you have done it. However I have marked them up differently, I have used a list for them and I have also used a smidge of CSS. I'm telling you this because if you copy and paste the HTML and JavaScript accross, but not the CSS, the page will most likely not look like you intend. Just a warning so you don't have a heart attack or anything. ?

If you want to retain the border around the clickers then you will need to use some CSS. The styles I have given to the clickers look like this:

.clicker{
 text-align:center;
 cursor:default;
 border:1px solid #000;
 width:2ex;
 }

There are some comments that explain what each rule does in the actual file.

You should also know that div tags are block level elements. What does that mean? It means that they will not sit on the same line as anything else, therefore you cannot just put them in your page and expect them to line up. You can either keep the markup and CSS that I wrote or try and figure out your own solution to the problem.

If a user does not have JavaScript enabled, I recommend that you send them a series of drop-down boxes, that way would probably be the easiest, it's pretty clear and you can still keep the same layout.

[upl-file uuid=a646c20f-8e0a-48a8-9c90-30685c873752 size=3kB]clickers.txt[/upl-file]

@mcsauthorNov 12.2004 — #That's so nice of you, thanks alot man.

@David_HarrisonNov 12.2004 — #Happy to help. ?

@mcsauthorNov 13.2004 — #Sorry to keep bothering you, but is there any way I can give certain inputs certain values right away, on the page load. I was thinking giving it switching the speciall atribute from "yes" to "x" and then

if(special == "x"){

nextchar(this);

nextchar(this);

nextchar(this);

nextchar(this);

}

i dont even want to try that cuz ive never really looked at any javascript but hopefully that can help a little?

@David_HarrisonNov 13.2004 — #OK, with this new script it is possible to set default values via the special attribute. In two different ways.

special="x" for example will set the default value as x.

special="4" will also set the default value as x.

If you look at the options array:var options=new Array("-","o","d","g","x");Each item in it is given a corresponding number, like so:

 0   1   2   3   4
 var options=new Array("-","o","d","g","x");

Therefore I decided to also make it possible to state the default character with it's number as well.

If for some reason you enter some gobbledigook into the special attribute like special="vaxw7dea" then the script will obviously not understand it. In that case the default character will be set at "-".

The original script was slightly flawed in IE by the way. IE decided that it didn't want to change the value of the hidden input fields. I have altered the script now so that it does.

[upl-file uuid=5a1cf5fc-7785-4b34-ab25-8082b2b5b01f size=4kB]clickers2.txt[/upl-file]

@mcsauthorNov 13.2004 — #Thank you so much! If I make tons of money off this:p yeah right...

Ill give you some, lol.

@David_HarrisonNov 13.2004 — #Happy to help. ?

Also in #JavaScript _↴

onclick to open div with info on same page Basic Javascript help Please help...use array based on name of other variable

Success!

Help @mcs spread the word by sharing this article on Twitter...

Tweet This

How hard is this to do…

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How hard is this to do…

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴