so what i have done is to have the craft button only show when you have a certain amount of items selected to use in crafting. (in my case atm its between 1-3 items)
so now when ever i have that many boxes checked on my list a craft button appears allowing you to go ahead with crafting.
you can see how it works here
http://torni.netii.net/test/test.html
This is using jQuery btw
here is the code...
Code: Select all
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showHide').hide();
$('.checker').change(function(){
var checked=$('input:checkbox:checked').length;
if(checked > 0 && checked < 4){
$('#showHide').show();
} else {
$('#showHide').hide();
}
});
});
</script>
</head>
<body>
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="checkbox" class="checker" />
1</label>
<br />
<label>
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" class="checker" />
2</label>
<br />
<label>
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" class="checker" />
3</label>
<br />
<label>
<input type="checkbox" name="CheckboxGroup1_" value="checkbox" class="checker" />
4</label>
<br />
</p>
<span id="showHide">You can see me :p</span>
</body>
firstly you want to make a checkbox group using a couple of <input type="checkbox" /> tags. name and value is as standard used for your form, so no need for me to explain that (i hope lol)
next you will need to add a class which will be used as an identifier when jQuery does its thing
<input type="checkbox" class="checker" />
ok when you have a series of them done, we want to add something that we can hide and show providing the conditions are met. In the above case we are displaying some simple text surrounded by a span tag with an id of 'showHide', again this is only an identifier for jquery to work with.
<span id="showHide">Text Here</span>
Right thats the visual HTML element of things done, which everyone should be able to do by now.
next we shall break up the jquery.
firstly we want to go ahead and include the jquery file by entering the source root in the head section of our file.
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
This is now allowing us to use the jquery library as an additional form of coding language.
when you have that included, you want to open up another set of script tags in your head section with a type of 'text/javascript'
<script type="text/javascript"></script>
Still following?? good, here comes the magic.
when the document first loads up, we want to hide the text which is eclosed in the span tags which have an id of showHide. To do this we need to first initiate an onDocumentReady call out, which is made simpler by using the jquery format of '$(document).ready' so lets add this in...
<script type="text/javascript">
$(document).ready
</script>
we also need to give it a function to run when the document is ready, so on the end of ready we wil add brackets containing 'funtion(){'
<script type="text/javascript">
$(document).ready(function(){
</script>
we now want to close the curled bracket and the ready bracket off to close the function off... and any further code will sit inside the tho curled brackets of the function command.
<script type="text/javascript">
$(document).ready(function(){
});
</script>
right now we have set this function to run asoon as the document is ready, we need to give it something to do. so to start with we know we want to hide the text contained in the span tags. to do this we will use the 'hide()' function from the jquery library, but obviously jquery doesnt know what its ment to be hiding without being told, this is where our id of the span tag comes into play. all code following is to be contained within our document ready function we have just created. (i am not going to keep repeating it, because it gets boring and confusing lol)
first we need to tell jquery what it is looking for so we can associate an action to it.
$('#showHide')
this tells jquery its looking for an element with an id of showHide (the # tells jquery that its an id not a class, just like you would do in CSS) now we have told jquery what to look for, we need to tell it what to do with this. so we add the hide() command to it.
$('showHide').hide();
also note that between each element, command or otherwise there is a period sign ( . )
now if you test your code, you will notice that the text within the tags should have vanished. if you test it and it hasnt vanished, make sure you are linking your jquery to the right place and the code looks like it is ment to lol.
ok moving on
now we want an action to happen every time you/someone checks a box, we will do this by using the onChange command, made simpler by using '.change()'
so again we start off by telling jquery what its looking for a change in, in this case we want it to look for when a box is checked/unchecked (the change) so we need to add the following...
$('#showHide').hide();
$('.checker')
this makes jquery listen out for a change with anything that holds a class of checker. then we need to add the .change command again followed by the full call out function(){ }. so lets add this to the mix,
$('showHide').hide();
$('.checker').change(function(){
});
we are nearly there, so now we need to tell jquery what to do when it notices the change, this code is contained within the function(){ } we have just created.
firstly we want it to check to see how many boxes have been checked, so we create a variable to hold this number in...
var checked=
now for it to count how many checked boxes we have, we want to count the length of any input tags which are of the type checkbox that are checked... understand?? i hope so lol. right so on the end of the variable creation we add the following
var checked=$('input:checkbox:checked')
this is now telling jquery that it is looking for what we want it to look for. now we need it to count them, so lets add the .length() function to the end of that.
var checked=$('input:checkbox:checked').length();
now for the final part
we want jquery to do different things depending on how many boxes are checked. so we use if and else statements.
var checked=$('input:checkbox:checked').length();
if(){
} else {
}
now to set the if conditions, we know we want it to show the text when we have 1-3 boxes checked, so if the number of boxes is more than 0 but less than 4 we want the text to show.
var checked=$('input:checkbox:checked').length();
if(checked > 0 && checked < 4){
} else {
}
so jquery now knows that if thiose conditions are met, it needs to do something. well in this case we want to show that text, just like at the start of the jquery code we hid the text using the hide() function. we want to use the opposite to show it, which would of course be show()
so telling jquery what to show by putting in the $('.showHide') identifier we can put this all in the if section of our conditions.
var checked=$('input:checkbox:checked').length();
if(checked > 0 && checked < 4){
$('.showHide').show();
} else {
}
and then of course to finish it all off. we want to hide it again if those conditions are not met.... so i am sure you know how to hide it again. yep, the hide() function. add that in after the else condition and we are done.
var checked=$('input:checkbox:checked').length();
if(checked > 0 && checked < 4){
$('.showHide').show();
} else {
$('.showHide').hide();
}
well thats all you need. I hope it hasnt been to confusing for you lol. i really am no good with words but have tried to make it as simple to understand as possable. I find jquery alot of fun to use (you will probably notice if u have seen my game rofl) and it is such a simple way to implament the confusing ajax, i plan on doing another jquery tut soon but that one will probably be video (i only done this one now becuase i was excited i got it working how i wanted it lol and i was waiting on something downloading)
anywhos, im off to bed to watch a film. feel free to ask any questions... but please think before you do ask, if you are having trouble getting this to work, re read the tutorial, check to make the sure the script matches up. and if you do ask why its not working POST YOUR SCRIPT SO I CAN SEE IT. any one simply saying 'its not working help me' i will ignor and slap anyone who tries to assist you. im not being cruel out of spite, i am doing it because i really cannot see your code lol
peace out muffins xx
and just once more... the jquery code
$(document).ready(function(){
$('#showHide').hide();
$('.checker').change(function(){
var checked=$('input:checkbox:checked').length;
if(checked > 0 && checked < 4){
$('#showHide').show();
} else {
$('#showHide').hide();
}
});
});
