表单提交后输入按钮更改颜色

Question

我想问问是否有人知道在表单提交后如何更改用作提交按钮的输入的颜色。 我使用twitter bootstrap 3，欢迎使用任何方法。 越简单越好。 在我的代码中，我填写了一个表格：

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

每种游戏类型都有很多同类产品，它们可以作为我产品页面上结果的过滤器。 一切正常，我尝试在用户应用的按钮上添加一些颜色以过滤结果，但是在表单提交后，颜色仍然是默认颜色。 我尝试过JavaScript，我尝试过JQuery，但仍然没有。 提前致谢。

Answer 1

尝试将id标签添加到输入中。 然后，您可以更改所选输入的背景颜色。
这是..

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

在您的输入中添加

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

在输入中添加一个ID，然后添加一个更改CSS的函数。请使用onmousedown="change(this.id);访问该函数onmousedown="change(this.id);

Answer 2

我使用php super global $ _SESSION []解决了这个问题。 我将每次按下的输入值存储到会话中，然后通过回显来应用样式。

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>';
}