[英]Input button change color after form submit
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. 我使用twitter bootstrap 3,欢迎使用任何方法。 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. 我尝试过JavaScript,我尝试过JQuery,但仍然没有。 Thanks in advance. 提前致谢。
try adding a id tag to the input. 尝试将id标签添加到输入中。 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);
在输入中添加一个ID,然后添加一个更改CSS的函数。请使用onmousedown="change(this.id);
访问该函数onmousedown="change(this.id);
I used php super global $_SESSION[ ] to solve this problem. 我使用php super global $ _SESSION []解决了这个问题。 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>';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.