Input button change color after form submit

Question

I would like to ask if anyone knows how do you change the color of an input that serves as a submit button, after the form submission. I use twitter bootstrap 3 and any approach would be welcomed. The simplest the better though. In my code I have a form filled with:

<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Action" style="width:45%;font-size: 12px">

<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Adventure" style="width:45%;font-size: 12px">

<input class="btn btn-default" onclick="document.getElementById('priceform').submit()" name="filter" type="submit" value="Family" style="width:45%;font-size: 12px">

and many more of the same kind for every game genre there is and they serve as a filter for the results on my product page. Everything works good and I tried to put some color on the button the user applied to filter their results but of course after the form submission the color remains the default. I tried JavaScript, I tried JQuery and still nothing. Thanks in advance.

Answer 1

try adding a id tag to the input. Then you can change the color of the background on the selected input.
This is how..

function change(id){
    document.getElementById(id).style.background = '#999';
}

To your input add

<input id="action" class="btn btn-default" onclick="document.getElementById('priceform').submit()" onmousedown="change(this.id)" name="filter" type="button" value="Action" style="width:45%;font-size: 12px">
<input id="adventure" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Adventure" style="width:45%;font-size: 12px">
<input id="family" class="btn btn-default" onclick="document.getElementById('priceform').submit()"onmousedown="change(this.id)" name="filter" type="button" value="Family" style="width:45%;font-size: 12px">

Add an ID to the input, then add a function that changes the CSS.Access the function with onmousedown="change(this.id);

Answer 2

I used php super global $_SESSION[ ] to solve this problem. I stored into session the value of the input that was pressed every time and then I applied a style through echoing it.

if (isset($_SESSION['filter'])) {
    $_GET['filter'] = $_SESSION['filter'];
    $f = $_GET['filter'];                 
    $filter = "AND type = '$f'";         //ignore this part
    $bool = true;                        //and this
    echo '<style>input[value="'.$f.'"] {
        background-color: #428BCA;
        color: white;
        font-weight: bold;
    }</style>';
}