Question

I have a multiple row of buttons in my javascript code which goes from A-Z:

<?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>

Below is the javascript function where it turns on and off each individual button:

function btnclick(btn)
{


$(btn).toggleClass("answerBtnsOff");
$(btn).toggleClass("answerBtnsOn");

    return false;
}

I want to perform a $_POST so that it posts all of the buttons which has been turned on. Does anyone know how the post method should be written for this?

Answer 1

I would suggest adding a hidden field together with the buttons turned on with the same name as the button. That way you will have the POSTs returned to you with values. This code is not tested but it should work something like this:

<?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\">";
    echo"<input type=\"hidden\" value=\"1\" id=\"hiddenAnswer".$val."\" name=\"hidden".$val."\" class=\"onButtons\">";
    if($i%7 == 0) echo"</td></tr>";
    $i++;
}
?>
</tr>

With the following JavaScript (assuming you are using jQuery):

function btnclick(btn)
{
    $(btn).toggleClass("answerBtnsOff");
    $(btn).toggleClass("answerBtnsOn");

    var hiddenId = '#hiddenAnswer'+btn.value;
    if ( $(btn).hasClass("answerBtnsOff") )
    {
        $(hiddenId).val('0');
        $(hiddenId).toggleClass('offButtons');
        $(hiddenId).toggleClass('onButtons');       
    }
    else
    {
        $(hiddenId).val('1');
        $(hiddenId).toggleClass('onButtons');
        $(hiddenId).toggleClass('offButtons');
    }   

    return false;
}

So if your buttons have the $val’s ‘Hello’, ‘World’, ‘Foo’, ‘Bar’ you will receive the following posts where they are either 1 (button turned on) or 0 (button turned off):

$_POST['hiddenHello']
$_POST['hiddenWorld']
$_POST['hiddenFoo']
$_POST['hiddenBar']

Notice that all buttons are “turned on” from the start.