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

我想问问有没有人知道在提交表单后，如何更改用作提交按钮的输入的颜色。我使用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，但仍然没有。提前致谢。

来源

2016-06-13 Vasilis Da Vitzi

按钮颜色改变不会为你做？ –

表单提交后，它保持原样。 –

我认为这是因为你的页面在你的表单被提交时重新加载，因此JavaScript的变化被恢复。你必须使用session来保存按钮状态或使用ajax来提交表格 –

功能的功能我用php超级全局$ _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>'; 
}

来源

2016-06-13 05:02:34

尝试在输入中添加一个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.Access与onmousedown="change(this.id);

来源

2016-06-13 02:39:10

表单提交后，它不会保持我想要的颜色。我认为问题在于提交，因为它再次运行代码。 –

@VasilisDaVitzi我回答了这个问题后，在我看来，也许你并没有使用'AJAX.'在这种情况下，是的，它会恢复到原来的HTML和CSS。不确定你的程序的复杂性，但会建议查看'AJAX'或'Jquery'。使用户输入错误捕捉，页面操作等更容易扩展每个页面。很高兴你能想出你的问题:) –

谢谢詹姆斯当你回答我的问题时，你是对的。这只是我对网络开发的新东西，我试图弄清楚一些事情。下次我肯定会更好。 –

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

回答

相关问题