Question

I have a function below where if the user clicks on the “Add” button, it triggers the function below:

function addwindow(gridValues) { 

    if($(plusbutton_clicked).attr('id')=='mainPlusbutton') { 

        $('#btn'+gridValues).trigger('click');


        } 

    $.modal.close(); 
    return false;
} 

Now below is the code where it is able to display answer buttons A-Z, “True” or “False” and “Yes” or “No”:

Html code:

<?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>
    <tr>
<td>
<input class="answerBtns answers" name="answerTrueName"  id="answerTrue"    type="button"   value="True"    onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerFalseName" id="answerFalse"   type="button"   value="False"   onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerYesName"   id="answerYes"     type="button"   value="Yes"     onclick="btnclick(this);"/>
<input class="answerBtns answers" name="answerNoName"    id="answerNo"      type="button"   value="No"      onclick="btnclick(this);"/>
</td>
</tr>
</table>

Javascript code:

function getButtons()
{
    var i;
    if (initClick == 0) {
        for (i = 65; i <= 90; i++) { // iterate over character codes for A to Z
            $("#answer" + String.fromCharCode(i)).removeClass("answerBtnsOn").addClass("answerBtnsOff");

        }

        initClick = 1;
    }
    // code above makes sure all buttons start off with class answerBtnsOff, (so all button are white).
}

Below is the code where it turns on and off the answer buttons:

function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');

    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }
}

Now I have a table column known as “Answers” and each row under that column contains as Answer(s) and its own “Add” button. What my question is that if lets say in one of the rows contains the Answer A B D F and the user adds this row by clicking on the “Add” button, then I want the answer buttons A B D and F to be turned on and the other answer buttons to be turned off. Another example is if the Answer is True, then I want the True answer button to be turned on and the other answer buttons to be turned off.

So what do I need to put in the function addwindow(gridValues) so that when the “Add” button is clicked, its turns on and turn off the correct answer buttons?

Answer 1

Passing the id on click in this way it works for me debugging with selenium:

$('input').click(function() {
    var id = $(this).attr('id');
    btnclick(id);
}

I just removed on the html markup the onclick behavior.

Hope it works.