how to turn on multiple buttons? - php

Question

Got a bunch of letter buttons in code below:
<?php
$a = range("A","Z");
?>
<table id="answerSection">
<tr>
<?php
$i = 1;
foreach($a as $key => $val){
if($i%7 == 1) echo"<tr><td>";
echo"<input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\">";
if($i%7 == 0) echo"</td></tr>";
$i++;
}
?>
</tr>
</table>
Now the code below is able to turn on an answer button:
$('#answer'+btn).addClass("answerBtnsOn");
Below is code for when "Add" button is clicked, it retrieves the "Answer" from the column:
echo '<td class="answertd">'.htmlspecialchars($searchAnswer[$key]).'</td>';
echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$searchAnswer[$key]');\">Add</button></td></tr>";
Below is the code where for each button (btn), it turns on/off the buttons:
function btnclick(btn)
{
if ($(btn).hasClass("answerBtnsOn")) {
$(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
return false;
}
if ($(btn).hasClass("answerBtnsOff")) {
$(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
return false;
}
}
But the only problem is that the code above is only able to turn on a single answer button on only. For example if the "Answer" is B, then it will turn answer button B on which is fine, or if the "Answer" is E, it is able to turn answer button E on.
The problem is that if there are multiple answers. If the "Answer" is B E, then it does not turn on buttons B and E, if "Answer" is A D F, it doesn't turn on buttons A D and F.
So my question is that how can I turn on multiple buttons if there are multiple Answers?
DEMO:
click here to view the demo and please follow the steps so you can use the demo:
Step 1: When you open applicaton, you see a green plus button on the
page, click on it and it will display a modal window.
Step 2: In modal window there is a search bar, type in "AAA" and
submit search, you will see a bunch of rows appear.
Step 3: In the first row, you see under "Answer" colum that the
answer is B, click on the "Add" button within this row, the modal
window will close and you will see that the answer buttons have been
displayed with the "B" button highlighted.
Now this works fine but it only works for single answer, follow the steps below:
Step 4: Click on the green plus button again and perform the same
search for "AAA";
Step 5: This time select a row which has multiple answers under the
"Answer" column e.g the third row has answer "A C" under the "Answer"
column. Add this row by clicking on "Add" button
Step 6: You will see that it displays the relevant buttons but it
doesn't turn on any of the answer buttons, "A" button and "C" button
are not highlighted green. This is the problem I am having
UPDATE:
//I can't use the toggle method you have mentioned because there is a suitable reason for this (long story)
if ($(btn).hasClass("answerBtnsOn")) {
$(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
return false;
}
if ($(btn).hasClass("answerBtnsOff")) {
$(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
return false;
}
//When "Add" button is clicked, it should turn on correct buttons
function addwindow(condition) {
$('input[type=button]').each(function(){
if (condition){
$(this).addClass('correct');
}
});
}
HTML code is same as html code on top of question

Answer 1

You need to use class instead of ID and give the same class to all correct answers, so all correct answers will get class of .correct and then in jquery:
$('.correct').addClass("answerBtnsOn");
EDIT:
Answering your question in the comment - yes, you should create an array of the buttons, run on it and add the .correct class to all the right answers.
Also change you code from:
if ($(btn).hasClass("answerBtnsOn")) {
$(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
return false;
}
if ($(btn).hasClass("answerBtnsOff")) {
$(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
return false;
}
To:
$(btn).toggleClass("answerBtnsOn");
$(btn).toggleClass("answerBtnsOff");
It should do the same with much less code.
EDIT2:
The loop would be something like this:
$('input[type=button]').each(function(){
if (condition){
$(this).addClass('correct'));
}
});
where condition is true if this answer is correct.

Answer 2

Here is the modified code. At first we initialize php variables:
$a = range("A","Z");
$correct = "ADERW"; // some string with correct letters (aka answers)
Now we place the javascript function into page's head (or to an external file):
var oanswers = new Object(); // this object's attributes are named as correct letters
var answers = '<?php echo $correct; ?>'; //string
for (var i=0; i<answers.length; i++) {
oanswers[answers[i]] = true;
}
function btnclick(btn) {
if (!oanswers.hasOwnProperty(btn.id[6])) {
return;
}
if ($(btn).hasClass('answerBtnsOff')) {
$('.answers').each(function(){ // turn all correct answers on
if (oanswers.hasOwnProperty(this.id[6])) {
$(this).addClass('answerBtnsOn');
$(this).removeClass('answerBtnsOff');
}
});
} else {
$('.answers').each(function(){ // turn all correct answers off again
if (oanswers.hasOwnProperty(this.id[6])) {
$(this).addClass('answerBtnsOff');
$(this).removeClass('answerBtnsOn');
}
});
}
}
The btnclick function can toggle all correct answers Off and On. If you don't want toggling, simply erase the whole else branch. Instead of testing presence of the .created class, now it tests whether the object's property is defined or not.