Forum Moderators: open
<form method="post" name="checkboxform">
.
.
<input type="checkbox" name="VAR3" value="1" onClick="countChoices(this)">
<input type="hidden" name="AddItem3" value="VAR3># 3
.
<!-- 315 items defined here -->
</form>
My function countChoices(obj) seems too kludgy - and I'm hoping someone can help me with a tune-up.
The function contains all 315 checkbox definitions:
box3 = obj.form.VAR3.checked;
then it performs a count:
count=(box3? 1 : 0)+(box4? 1 : 0).. +(box315? 1 : 0);
If the count exceeds my max (set at 4) then I call a function to clear all the checkboxes. That part works nicely.
Can I define all these checkboxes with an array and also use array counting to determine the number of items selected? It seems to me that array processing might be quicker than reading 1500 lines of code every time I click a checkbox.
Give this a whirl...
// max. simultaneously checked
var checkedlimit = 4;
// array to hold all checkbox elements
var checks = new Array();
// function to fill checkbox elements array
function getCheckboxes() {
var count = 0;
var checkstmp = document.getElementsByTagName("input");
for (var j = 0; j < checkstmp.length; ++j) {
if (checkstmp[j].type == "checkbox") {
checks[count] = checkstmp[j];
++count;
}
}
}
// function to enforce checked limit
function checkCheckboxes() {
var checkcount = 0;
for (var j = 0; j < checks.length; ++j) {
if (checkcount <= checkedlimit) {
if (checks[j].checked) {
++checkcount;
}
}
else {
alert("You may only select " + checkedlimit +
" items at a time!");
return false;
}
}
return true;
}
// fill checkboxes array on page loaded
window.onload = getCheckboxes;
...
<div>
<form>
<input type="checkbox" onclick="return checkCheckboxes();" />
<input type="checkbox" onclick="return checkCheckboxes();" />
<input type="checkbox" onclick="return checkCheckboxes();" />
<input type="checkbox" onclick="return checkCheckboxes();" />
<input type="checkbox" onclick="return checkCheckboxes();" />
</form>
</div>
Nb. Make sure you get the
returnreturn false;Jordan
Last week I all about learning CSS, now I guess I need to change gears and look at JS. There's tons of scripts out there, but nothing beats knowing what you're doing. I'll be glad when we're big enough to move all this to an AS/400, something I know a little about.
I've been messing with this thing for a few hours now, and I'm about ready to go back to the drawing board. For some reason I get a few "extra" selections sent along with the actual choices, so 5 or 6 or more items might end up on my cart. That's not exactly what I had in mind. Seems like I glanced at something yesterday that mentioned that problem with radio buttons and checkboxes? It also only seems to occur if the max limit is exceeded. I"m resetting all the checkboxes to false when this happens, so I'm at a loss as to where the random extras are coming from.
In full "back up and punt mode" I'm thinking what I really want to do is have a drop down menu with all my selections. When one selection is made, click a button to add it to a list on my page. When the requisite 4 items are selected, no more and no less, then a second submit button will send the goods off to my cart. Under the covers I'm going to try to take those 4 variables and pass them into my cart string as a single value.
Thanks for the feedback. Looks like I'll be cobbling all night now :)
I'm thinking what I really want to do is have a drop down menu with all my selections. When one selection is made, click a button to add it to a list on my page. When the requisite 4 items are selected, no more and no less, then a second submit button will send the goods off to my cart.
Sounds like a plan. :)
Will probably be much easier on the user that way as well since all of the selections will be centralized in the dropdown. You might play with the disabled attribute on the second (submit) button that goes to the cart. E.g.,
<input id="sub" type="submit" value="Checkout" disabled="true" />
Then once the correct number of selections is made, do...
document.getElementById("sub").disabled = false;
That way they only get the option to submit once they have made the requisite selections.
Jordan
Ps. Let us know if you need any other help, as JavaScript can sometimes bite you in the pants for no apparent reason, mind you...I've got the bite marks to prove it! ;)
My redesign went pretty well for an amateur. But I have a question.
I can select an item from my drop down box, and I can populate a text field with the selection. My array TArray is defined globally so I can populate it from one form and get the results into second form. Nothing fancy here, trust me. But it works.
Here's my question. In my form "Add" I'm selectiong the options and calling function testSelect to get the variable name. What is getting returned is the right side of the option:
<option value="ALM">Almond</option>
I assume that's the .selectedIndex part of my Item definition. What can I do to also retreive the left part of my option, or "ALM"?
function testSelect (form) {
Item = Add.VARname.selectedIndex;
Result = Add.VARname.options[Item].text;
//alert (Result);
T = Add.VARname.options[Item].text;
fillform(T)
}
// don't cringe... it works.
function fillform(form) {
if (Add.T1.value == "")
{if (i == 1) Add.T1.value = T; TArray[0] = T; ++i;}
else if (Add.T2.value == "")
{if (i == 2) Add.T2.value = T; TArray[1] = T; ++i;}
else if (Add.T3.value == "")
{if (i == 3) Add.T3.value = T; TArray[2] = T; ++i;}
else if (Add.T4.value == "")
{if (i == 4) Add.T4.value = T; TArray[3] = T; ++i; document.getElementById("AddSubmit").disabled = false;}
}
I added this line to my function testSelect:
Result2 = Add.VARname.options[Item].value;
Are there perhaps other options besides "text" and "value" that I can use here? Anyway, it's starting to make sense.
I even ended up building my functions not from borrowed scripts but by looking at scripts and finding what I could on the internet. That's not to say I didn't use some borrowed script too... Yes, I need a JS Bible over here.
I believe what helped as much as anything was the ability to have a running dialog with the issues I was facing. The situation over here is that I'm speaking greek to anyone willing to listen, and it's greek I can't even speak fluently. So having somewhere to turn is a blessing.
I'd love to post the addy of my work, but rules are rules. I'm a proud grandpa today.
Thanks
Congrats! Sounds like you put alot of work into it, so enjoy the fruits! "By the sweat of your brow you shall eat bread." ;)
Two resources I couldn't do without for JavaScript are the Guide and Reference listed here (which can be viewed online or downloaded as zip packages):
[devedge.netscape.com...]
They cover everything -- and I do mean everything, and they usually give working examples to boot. :)
Jordan
