Conflicting Javascript Issue

[RamosDevil]

Hey guys, I'm having trouble when adding two javascript scripts to my page. They work individually, but together only one works. I'm new to JS so any help you can give is appreciated!

I'm trying to have a form with checkboxes that passes the checkbox information to another field. There are four tiers of checkboxes, and only a certain amount of checkboxes can be selected in each tier. For instance:

Tier 1 - Platinum
1
2
3
4
5
6

Tier 2 - Gold
1
2
3
4

etc., where you can only select 3 values from tier one, 1 from tier 2, and so on. When the values are selected, each tier passes the selected checkbox values to a text field. Here's my code:




<script type="text/javascript">

/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" games in this tier.")
this.checked=false
}
}
}
}

</script>


<script type="text/javascript">
<!--
document.write('<textarea cols="30" id="platinum" rows="5"></textarea>')

function updatePlatinum (e) {
document.getElementById('platinum').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked && e.form.elements[i].className == 'platinumselect') {document.getElementById('platinum').value += e.form.elements[i].nextSibling.data; document.getElementById('platinum').value += '\n';}};
}
// -->

<!--
document.write('<textarea cols="30" id="gold" rows="5"></textarea>')

function updateGold (e) {
document.getElementById('gold').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked && e.form.elements[i].className == 'goldselect') {document.getElementById('gold').value += e.form.elements[i].nextSibling.data; document.getElementById('gold').value += '\n';}};
}
// -->

<!--
document.write('<textarea cols="30" id="silver" rows="5"></textarea>')

function updateSilver (e) {
document.getElementById('silver').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked && e.form.elements[i].className == 'silverselect') {document.getElementById('silver').value += e.form.elements[i].nextSibling.data; document.getElementById('silver').value += '\n';}};
}
// -->

<!--
document.write('<textarea cols="30" id="bronze" rows="5"></textarea>')

function updateBronze (e) {
document.getElementById('bronze').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked && e.form.elements[i].className == 'bronzeselect') {document.getElementById('bronze').value += e.form.elements[i].nextSibling.data; document.getElementById('bronze').value += '\n';}};
}
// -->

</script>

<form id="tixselect" name="tixselect">
<div>
<label><input type="checkbox" class="platinumselect" name="platinumselect" onclick="updatePlatinum(this)" \>Platinum Game 1</label>
<label><input type="checkbox" class="platinumselect" name="platinumselect" onclick="updatePlatinum(this)" \>Platinum Game 2</label>
<label><input type="checkbox" class="platinumselect" name="platinumselect" onclick="updatePlatinum(this)" \>Platinum Game 3</label>
<label><input type="checkbox" class="platinumselect" name="platinumselect" onclick="updatePlatinum(this)" \>Platinum Game 4</label>

<label><input type="checkbox" class="goldselect" name="goldselect" onclick="updateGold(this)" \>Gold Game 1</label>
<label><input type="checkbox" class="goldselect" name="goldselect" onclick="updateGold(this)" \>Gold Game 2</label>
<label><input type="checkbox" class="goldselect" name="goldselect" onclick="updateGold(this)" \>Gold Game 3</label>
<label><input type="checkbox" class="goldselect" name="goldselect" onclick="updateGold(this)" \>Gold Game 4</label>

<label><input type="checkbox" class="silverselect" name="silverselect" onclick="updateSilver(this)" \>Silver Game 1</label>
<label><input type="checkbox" class="silverselect" name="silverselect" onclick="updateSilver(this)" \>Silver Game 2</label>
<label><input type="checkbox" class="silverselect" name="silverselect" onclick="updateSilver(this)" \>Silver Game 3</label>
<label><input type="checkbox" class="silverselect" name="silverselect" onclick="updateSilver(this)" \>Silver Game 4</label>

<label><input type="checkbox" class="bronzeselect" name="bronzeselect" onclick="updateBronze(this)" \>Bronze Game 1</label>
<label><input type="checkbox" class="bronzeselect" name="bronzeselect" onclick="updateBronze(this)" \>Bronze Game 2</label>
<label><input type="checkbox" class="bronzeselect" name="bronzeselect" onclick="updateBronze(this)" \>Bronze Game 3</label>
<label><input type="checkbox" class="bronzeselect" name="bronzeselect" onclick="updateBronze(this)" \>Bronze Game 4</label>
<button type="submit">Submit</button>
</div>
</form>

<script type="text/javascript">

//Syntax: checkboxlimit(checkbox_reference, limit)
checkboxlimit(document.forms.tixselect.platinumselect, 2)
checkboxlimit(document.forms.tixselect.goldselect, 1)
checkboxlimit(document.forms.tixselect.silverselect, 3)
checkboxlimit(document.forms.tixselect.bronzeselect, 1)

</script>




Any ideas?

[jscheuer1]

Not ideal, but it seems to work -

Replace:


<script type="text/javascript">

/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

function checkboxlimit(checkgroup, limit){
var checkgroup=checkgroup
var limit=limit
for (var i=0; i<checkgroup.length; i++){
checkgroup[i].onclick=function(){
var checkedcount=0
for (var i=0; i<checkgroup.length; i++)
checkedcount+=(checkgroup[i].checked)? 1 : 0
if (checkedcount>limit){
alert("You can only select a maximum of "+limit+" games in this tier.")
this.checked=false
}
}
}
}

</script>

with:


<script type="text/javascript">

/***********************************************
* Limit number of checked checkboxes script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Customized 12/2011 to work with textarea/checkbox script
***********************************************/

function checkboxlimit(checkgroup, limit){
for (var i=0; i<checkgroup.length; i++){
checkboxlimit.addEvent(checkgroup[i], 'click', function(){
var checkedcount = 0;
for (var i = 0; i < checkgroup.length; ++i)
checkedcount += (checkgroup[i].checked)? 1 : 0;
if (checkedcount > limit){
alert("You can only select a maximum of "+limit+" games in this tier.");
this.checked=false;
this.onclick(this);
}
});
}
}

checkboxlimit.addEvent = (function(){
return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
} : window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
} : function(){return;};
})();

</script>

But unless there's other code I'm unaware of, you're not going to get any useful information when this form is submitted. If you want help with that, let me know.

[RamosDevil]

Great! This does the trick. I'm actually parsing this data into another form for submission, and that works - it was just getting these two scripts to work. Could you explain exactly what it is you did to get this to work? I'm thrilled that it works, but now I'd like to know how it works ;)

[jscheuer1]

OK, there were two basic problems. The first was that both scripts want the click event of the checkboxes. There are numerous ways to get at those events. But they all fall into one of two broad categories, either exclusive, or inclusive. They were both exclusive. Since the checkboxlimit function goes after these click events after they've been hard coded to the other functions, it made sense to make checkboxlimit's way of assigning the click events inclusive. That's what addEventListener does in most browsers and attachEvent does in IE (IE 9 can do either, depending upon some things, it can always do the latter). So I set up a function that figures out which method the browser can use and then assigns that method to a function I called checkboxlimit.addEvent.

So now when checkboxlimit runs it assigns its click events in a non-destructive, inclusive manner, allowing the hard coded events to still fire.

Which brought me to the second problem. Since checkboxlimit's click happens after the hard coded click, the text was already added to the textarea. After a bit of trial and error I hit upon the idea of running that function again after unchecking the checkbox:


if (checkedcount > limit){
alert("You can only select a maximum of "+limit+" games in this tier.");
this.checked=false;
this.onclick(this);
}

Doing it at that point removes the added text.

However, it would probably be better to make one function that could service all the checkbox/textarea groupings that uses just the non-destructive method of assigning click. But that would have been quite a bit more work and harder to follow from the point of view of, "How did we get that from the original code?". It's also why I said at the beginning of my response, "Not ideal . . ."