Update the color of buttons after being clicked - Bootstrap

If I want to change the class "btn-success" to "btn-warning" or update the color code to "#ffc107" upon a successful process, how can I achieve 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>

            // -------- Change to "btn-warning" ------------

          </script>

          <?php 
        }
        else 
        {
            echo "Did not work";
        }

}  ?>

Answer №1

One simple solution to this problem is to use the removeClass and addClass functions.

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

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

Alternatively, you can also try using the toggleClass method.

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 issue is that you have included header("Location:index.php"); before the script, causing your script to not execute. Remove header("Location:index.php"); to resolve this problem.

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

Answer №2

Here are some useful methods in JavaScript and JQuery that you can use.


Using JQuery

Changing color

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

Changing class

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

Toggle class

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


Using plain JavaScript

Changing color

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

Changing class

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

I have tested all of these methods and they are effective.

Choose the one that suits your needs the best.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery to Identify the Clicked Div Container

Currently working on a JQuery script to determine which specific div box was clicked, but running into some issues. I understand that there are other approaches to achieve this by directly invoking functions upon clicking a div box, but I want to first ide ...

Is it possible to use the identical change function on numerous div elements?

How can functions be bound to multiple div elements effectively? $('#trigger1').change(function(){ // implement the code }); $('#trigger3').change(function(){ // execute the same code }); ...

Troubleshooting a scope problem with ng-include while maintaining the original template

I have a select box within my template that has the following structure: <form name="myForm" class="fixed-select"> <select name="repeatSelect" id="repeatSelect" ng-model="selectedItem"> <option ng-repeat="program in pro ...

Error caused by jQuery AJAX call: Receiving a 304 response code causes a problem

I am facing an issue with a script on my localhost that sends a GET request to the same domain. The response I am getting is a 304, which seems to be causing JQuery to treat it as an error. $(document).ready(function(){ $.ajax({ type: 'GE ...

"Failure to Update: Ajax Auto-Refresh Table Failing to Refresh

I'm facing a tricky issue with my code that I just can't seem to resolve. Currently, I am using Ajax and setTimeout to retrieve data. The problem arises when the data doesn't refresh automatically (if I manually navigate to the page getdata. ...

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

I have a basic HTML file with a Bootstrap form, along with a simple API coded within. In my server.js file, I've specified that when I request /about, it should redirect me to the about.html page. However, instead of redirecting, I'm encountering ...

Is there a way to modify the color of my question post-submission?

Within my code, there are numerous queries that need to be addressed. Upon submission, I desire to alter the color of each question to green if the response is correct, or red if it is incorrect. document.getElementById("submit-button").addEventLi ...

What is the best way to ensure that my text always aligns perfectly to the end of the line?

I've been struggling to create a column layout where the text perfectly aligns with the end of the line, but so far, I haven't had any success. Despite my efforts to find a solution online, I have come up empty-handed. What I'm aiming for i ...

DirectionsLight isn't functioning properly in Three.js

I attempted to add lighting in Three.js, but after updating the display, the light didn't seem to affect my cylinder. I simply copied and pasted the source code from the Three.js documentation Three.js as instructed, but to no avail. Below is the cod ...

Utilizing AngularJS scope within a modal viewport

I am encountering an issue with my simple controller while fetching and displaying messages using $http.get in HTML using ng-repeat. The problem arises when trying to access the messages from a modal window, as it always prints the first message only. ind ...

Unable to find custom components when using react-router

My goal is to improve the organization of my Routes in React and separate concerns. I am currently utilizing react-router-dom version 5. Within my Application Routes component, I have structured it with 3 children components: AuthenticatedRoutes PublicRo ...

Vue.js using the v-for directive with index

Just started using Vue.js and I have a question: I'm working with an array to create a table. When I double click on a table row, I want the program to execute a JavaScript function that will retrieve the selected item based on its index. <di ...

Finding the element in the HTML using selenium and Python

Recently, I have been working on automated testing using Selenium. However, I have encountered a strange issue where I am unable to locate the element. Can someone please provide me with guidance on how to handle this situation? driver.find_element_by_xpa ...

Customizing error messages in Joi validationorHow to show custom

Hi there, currently I am utilizing "@hapi/joi": "^15.1.1". Unfortunately, at this moment I am unable to upgrade to the most recent Joi version. This represents my validation schema const schema = { name: Joi.string() .all ...

Encountering the error message "Cannot GET /" when trying to access the front page using Express.js

I am a beginner in Node.js. I have been learning through videos and documentation, and I started developing a site following an MVC structure. The node server appears to be working fine, but I am facing an issue where the front end displays 'Cannot GE ...

I'm encountering an error when trying to return a value using the question mark operator in Vue.js - can someone explain why

When I attempted to retrieve the value using the question mark operator instead of using return twice, I encountered an error stating "Cannot read property 'omitDescription' of undefined." buttonText() { return this.omitDescription ? 'プ ...

Javascript selection menu

<body> <script> window.open("http://yourdomain.com:12345/custom/script","_parent"); document.getElementById("dropdown").selectedIndex="2"; </script> </body> Hello, can someone help me troubleshoot my code? My intention is to open ...

The sequence for conducting operations within a function in JavaScript (Vue.js)

I am currently working on building a contact-list app using Vue.js. Each contact in the list can have multiple addresses, emails, and phone numbers. To accommodate this, I have set up inputs and a button to add additional fields as needed. My issue arises ...

Check out the latest enhancements to React and Flask Fullstack right from your web browser

Recently, I ventured into the world of React and Flask development by following a tutorial found at this link. After completing the example fullstack website project, I realized that my code mirrored exactly what was provided by the author on their Github ...

Can a TypeScript-typed wrapper for localStorage be created to handle mapped return values effectively?

Is it feasible to create a TypeScript wrapper for localStorage with a schema that outlines all the possible values stored in localStorage? Specifically, I am struggling to define the return type so that it corresponds to the appropriate type specified in t ...