单击时更改按钮颜色 - Bootstrap

Question

If the process is successful, I want to change the "btn-success" class to "btn-warning". Or we can update the color code to "# ffc107". How can I do that?

Button;

<button type="submit" name="teklifver" value="Teklif Ver" class="btn btn-block btn-success" id="teklifpasif">Teklif Ver</button>

Php Code;

...

    $insert=$query->execute(array(

        "arac_id" =>$arac_id,
        "kullanici_adsoyad"=>$kullcek['kullanici_adsoyad'],
        "ihale_secenek" =>$ihale_secenek

        ));


        if($insert)
        {

          header("Location:index.php");
          ?>

          <script>

            // -------- Must be "btn-warning" ------------

          </script>

          <?php 
        }
        else 
        {
            echo "olmadı";
        }

}  ?>

Answer 1

a simple solution for this is trying removeClass and addClass

https://api.jquery.com/removeClass/#removeClass-className

$('#teklifpasif').removeClass('btn-success').addClass('btn-warning');

Or you can also try toggleClass

https://api.jquery.com/toggleClass/#toggleClass-className

$('#teklifpasif').toggleClass('btn-success btn-warning');

Update

$(document).ready(function () {
   $('#teklifpasif').removeClass('btn-success').addClass('btn-warning');
 });

ERROR

the problem in you have added header("Location:index.php");before script so your script won't execute until you remove header("Location:index.php");

remove header("Location:index.php");

Answer 2

Those are some options for you in JavaScript and JQuery.

---

In JQuery

Change color

$("#teklifpasif").css("background-color", "#ffc107");

Change class

$('#teklifpasif').removeClass('btn-success').addClass('btn-warning');

Toggle class

$('#teklifpasif').toggleClass('btn-success btn-warning');

---

In plain JavaScript

Change color

document.getElementById("teklifpasif").style.color = "#ffc107";

Change class

document.getElementById("teklifpasif").classList.remove('btn-success');
document.getElementById("teklifpasif").classList.add('btn-warning');

---

They all work, I tried them a while ago.

Just choose one of those options ^^