提交表单后按钮颜色保持不变 [英] button color stay same after submitting the form
本文介绍了提交表单后按钮颜色保持不变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在顶部有3个按钮，颜色是给定的。当我按下按钮时，它会改变颜色，指示按下了按钮并且我的提交表单打开。只要我提交表单消息显示成功。但是我的问题是因为我按提交按钮的顶部按钮颜色变成了前一个，但我希望它保持不变，我可以这样做，请帮助！
这里是我的代码：
i have 3 buttons in the top with color given.as i press the button it changes the color indicating that following button has been pressed and my submit form opens.as soon as i submit the form message displays "successful".but my problem is as i press the submit button the top button color changes to the previous one but i want it to stay the same.how can i do this please help!!! here is my code:
这是我的javascript和css fr更改按钮颜色：
this is my javascript and css fr changing the button colors:
<script type="text/javascript">
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css('background-color',"#C1B0B3");
$(this).css('background-color',"#9C7260");
});
});
<style>
.beforeClick {
margin-left: 0.4%;
background-color:#C1B0B3;
font-weight: bold;
width: 14em;
height: 2em;
}
</style>
这是我的按钮及其形式：
this is my buttons and its forms:
<html>
<body>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260">Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick"> Report3</button>
<script type="text/javascript">
$("#incbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide();
$("#form_sub_container3").hide();
})
$("#dthbutton").click(function() {
$("#form_sub_container2").show();
$("#form_sub_container1").hide();
$("#form_sub_container3").hide();
})
$("#negbutton").click(function() {
$("#form_sub_container3").show();
$("#form_sub_container1").hide();
$("#form_sub_container2").hide();
})
</script>
<div id="form_sub_container1" style="display:<?= ( isset($_POST['rep']) || (!isset($_POST['report21']) && !isset($_POST['report31'])))? 'block':'none'?>">
//report1 functionalities
<input type="submit" name="rep" value="Save" id="btnsize1" /></td>
</div>
<div id="form_sub_container2" style="display: <?= isset($_POST['report21'])? 'block':'none'?>">
//report2 functionalities
<input type="submit" name="report21" value="Save" id="btnsize2" /></td>
</div>
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
//report3 functionalities
<input type="submit" name="report31" value="Save" id="btnsize3" /></td>
</div>
</body>
<html>
这是我的report3：
this my report3:
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
<?php
if (isset($_POST['report31']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report31']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
}
}
?>
<div id="color" >
<table>
<h1 align="center"><p> Report</h1>
<form action="" method="POST" id="form_id">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report31" value="Save" id="btnsiz" /></td></tr>
</form>
</table></br>
</div>
</div>
推荐答案
创建一个类并将其称为例如： .clickedButton 或 .afterClick 然后当表单提交时，您只是喜欢你与 #form_sub_container divs：
Create a class and call it whatever you want eg: .clickedButton or .afterClick and then when a form is submitted you do just like you did with #form_sub_container divs :
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
但是这次您必须使用按钮来完成它，如：
but this time you have to do it with your buttons, something like:
<button type="button" id="incbutton" class="<?= isset($_POST['rep'])? 'afterClick':'beforeClick'?>" >Report1</button>
<button type="button" id="dthbutton" class="<?= isset($_POST['report21'])? 'afterClick':'beforeClick'?>" >Report2</button>
<button type="button" id="negbutton" class="<?= isset($_POST['report31'])? 'afterClick':'beforeClick'?>" >Report3</button>
css
.afterClick{
background-color:#9C7260;
}
这篇关于提交表单后按钮颜色保持不变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
