цвет кнопки остается прежним после отправки формы

Question

У меня есть 3 кнопки вверху с заданным цветом. когда я нажимаю кнопку, она меняет цвет, указывая, что была нажата следующая кнопка, и открывается моя форма отправки. как только я отправляю сообщение формы, отображается «успешно». но моя проблема когда я нажимаю кнопку отправки, цвет верхней кнопки меняется на предыдущий, но я хочу, чтобы он оставался прежним. как я могу это сделать, пожалуйста, помогите !!! вот мой код:

Это мой javascript и css fr, меняющие цвета кнопок:

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

Это мои кнопки и их формы:

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

Это мой отчет3:

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

javascript html css

0

jermina 20 Фев 2015 в 09:17

Используйте id вместо класса, и лучше, если вы создадите функцию, а затем сделаете id в качестве параметра для нее.

–

Sachi Tekina

20 Фев 2015 в 09:44

Как это сделать..помогите пожалуйста

–

jermina

20 Фев 2015 в 09:52

Answer 1

Нет.. это то, что вы хотите?

$(document).ready(function(){
	$('.beforeClick').click(function(){
		$(this).css('background-color',"#C1B0B3");
	});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

0

Sachi Tekina 20 Фев 2015 в 10:24

Нет, на самом деле эти кнопки работают как вкладки. Но на каждой вкладке есть формы отправки. после отправки формы остаются на той же странице с отображаемым сообщением об успешном завершении, но эти кнопки переключаются. я хочу, чтобы он оставался на той же вкладке, т.е. эта кнопка должна выглядеть нажатой даже после отправки формы.

–

jermina

20 Фев 2015 в 10:37

О, используйте AJAX, затем в случае успеха добавьте css к кнопке.

–

Sachi Tekina

20 Фев 2015 в 10:44

Answer 2

Создайте класс и назовите его как хотите, например: .clickedButton или .afterClick, а затем, когда форма отправлена, вы делаете то же самое, что и с #form_sub_container div:

<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">

Но на этот раз вам нужно сделать это с помощью кнопок, например:

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

0

Fares M. 20 Фев 2015 в 16:12

цвет кнопки остается прежним после отправки формы

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript