Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute with jQuery or another method? Thank you.

JS:

if(sum>=window.start_fee){
    $(".shopcart").removeAttr("disabled")
    $(".shopcart").css("background", 'url(/static/images/cart2.png)')
}else{
    $(".shopcart").attr("disabled","disabled")
    $(".shopcart").css("background", 'url(/static/images/cart.png)')
}

CSS:

.shopcart{
     background:url(/static/images/cart.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}
javascriptjqueryhtmlcss

Answer №1

To improve your webpage's functionality, consider creating a CSS class specifically for disabled elements. This approach helps separate design from functionality, making your code cleaner and more organized. Here is an example:

CSS

.shopping-cart{
     background:url(/assets/images/cart-active.png) no-repeat; 
     border:none; 
     background-size:100% 100%; 
     width:57px; height:50px; 
     float:right;
}

.shopping-cart.disabled{
     background:url(/assets/images/cart-inactive.png) no-repeat; 
}

In JavaScript, you can dynamically add or remove the "disabled" class based on certain conditions. For instance:

JS

if(totalPrice >= minimumFee){
    $(".shopping-cart").removeClass("disabled");
} else {
    $(".shopping-cart").addClass("disabled");
}

Answer №2

Instead of Remove attribute, consider using addClass and removeClass methods.

$(document).ready(function(){
if(sum>=window.start_fee){
    $("input[type=submit]").removeClass("submitbtn");
    $("input[type=submit]").addClass("submitbtnnew");   
}
else{
    $("input[type=submit]").addClass("submitbtn");
    $("input[type=submit]").removeClass("submitbtnnew");

}

});
</script>

Set your background image for that specific class.

<style>
.submitbtn{
    background:#000;
}
.submitbtnnew{
    background:#03C;
}
</style>

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

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Creating an app that retrieves attachments from specific messages in my Outlook mail and stores the data in MongoDB. The challenge lies in the time-consuming process of receiving these attachments. To address this, I aim to execute the task in a separate t ...

javascriptnode.jsmongodbtypescriptoutlook

How can you determine if a string includes all the words listed in a multidimensional array?

I'm brand new to the world of coding but I have a specific goal in mind. Here's an example of the multidimensional array I'm working with: var requiredProducts = [{ product: 'PRODUCT 1', keywords: ['KEYWORD1', & ...

javascriptjqueryarraysstringmultidimensional-array

Upon the initial data retrieval, everything seems to be working fine. However, when the user transitions to chatting with another user, the state value does not reset and instead shows a combination

Exploring the world of react.js and node.js, I am currently working on developing a chatting application with the integration of socket.io. The issue I'm facing is that when a user clicks on another user to chat, the previous chat messages are display ...

javascriptnode.jsreactjssocket.io

When receiving JSON and attempting to store the data in a variable, I encounter an issue where it returns the error message "undefined is not iterable (cannot read property Symbol

I'm currently integrating the Advice Slip API into my project. I am experiencing an issue when trying to store the JSON data in a variable like so: let advice; fetch("https://api.adviceslip.com/advice").then(response => response.json()). ...

javascripttypescript

How can I determine the specific quantity of XPATH links with unique identifiers in Selenium?

Seeking automation with Python3 and selenium to streamline searches on a public information site. The process involves entering a person's name, selecting the desired spelling (with or without accents), navigating through a list of lawsuits, and acces ...

pythonhtmlselenium

Utilizing React's useState to store data in local storage

I am trying to figure out how to save data from a photos database API into local storage using the useState hook in React. Despite my attempts, I have not been successful with the useState method as the data in local storage gets cleared upon page refres ...

javascriptreactjsreact-hooks

Showing information in a modal dialog in an Angular 4 application

As an Angular 4 developer, I am working on an application where I need to display data in a dialog. To achieve this, I am using @Output to pass data from the child component to the parent component. In the parent component, my code looks like this: expor ...

javascriptangular

Accessing information from Firebase and displaying it within an Angular Controller

As a newcomer to the latest Firebase SDK (with some experience using angularfire), I set out to retrieve data and display it using Angular. This is my progress so far: var app = angular.module('dApp',[]); app.controller('listingControler&a ...

javascriptangularjsfirebasefirebase-realtime-database

The issue arises when attempting to use input alongside debounce, event.persist(), and storing the value at the parent component

Is there a way to implement an input field with debounced search where the value is passed from the parent component? Currently, when I pass the value from the parent component it doesn't work as expected. What would be the correct approach to make th ...

javascriptreactjsdebouncing

Setting up a Variable with an Object Attribute in Angular

I am attempting to create a variable that will set a specific property of an object retrieved through the get method. While using console.log in the subscribe function, I am able to retrieve the entire array value. However, as a beginner, I am struggling ...

javascriptangulartypescript

Maintain fullcalendar event filtering across multiple renderings

I currently have a fullcalendar that initially displays all events. I am using a select dropdown to filter the events, which works well. However, when the calendar re-renders after moving to the next month, it shows all events again. Here is my calendar in ...

javascriptjqueryfullcalendar

Integrating TypeScript into an established project utilizing React, Webpack, and Babel

Currently, I am in the process of integrating Typescript into my existing React, Webpack, and Babel project. I aim to include support for file extensions such as [.js, .ts, .tsx] as part of my gradual transition to Typescript. I have made some progress, b ...

javascripttypescriptwebpack

Top methods for integrating custom divs into your WordPress site using PHP

As someone who is new to wordpress, I have a solid understanding of php, html, css and javascript. I am interested in integrating a custom font resizer into my wordpress site similar to the example shown below: https://i.stack.imgur.com/FwoIJ.jpg What w ...

phphtmlcsswordpress

JQuery Validation - Implementing real-time validation on button click instead of form submission

I am currently attempting to use JQuery Validation with WebForms/html. I have simplified the HTML code below, displaying only the necessary elements: <input id="txtEmail"/> <input id="txtTicketID"/> <a id="create" href="#">Create a new t ...

asp.netjavascriptjquery

Steps for altering the primary color in PrimeNG__Changing the primary color

What is the most effective way to modify the default primary color for primeNG (saga-blue theme)? Altering --primary-color does not have the desired effect, as elements in node_modules/..../theme.css are styled using the main color hex rather than '-- ...

cssangularprimeng

What is the best way to send a React prop that is buried deep within a JSON structure?

Currently, I am in the process of creating a product table to showcase items for a store. The headers of this table include: id, title, imagePath, newPrice, oldPrice. To accomplish this, I have developed an ItemTable component within my React application t ...

javascriptreactjs

"Exploring the best way to loop through multiple JSON data in a jQuery response

https://i.stack.imgur.com/O0F6g.pngMy JSON response contains multiple data points presented as follows. WellNames […] 0 {…} id 56 well_name AL HALL api 34005205550000 1 {…} id 498 well_name BONTRAGER api 34005233850000 2 {…} id 499 ...

javascriptjquerydynamic-arrays

Utilizing Node.js with Redis for organizing data efficiently

Currently, I am in the process of configuring a Redis cache system for storing incoming JSON data in a specific format. My goal is to create an ordered list structure to accommodate the large volume of data that will be stored before eventual deletion. Th ...

javascriptnode.jsdata-structuresnode-redis

The MySQL Query Maker

To fetch data from a database for only one row and then generate separate pieces of information, use the following code: <?php session_start(); ob_start(); error_reporting(E_ERROR | E_WARNING | E_PARSE); ini_set("display_errors", 1); set_time_limit(1 ...

phphtmlmysqlcss

The best way to avoid routing before certain async data in the Vuex store has finished loading

I am facing a challenge in my application where I require certain data to be loaded into the VueX store before routing can commence, such as user sessions. An example scenario that showcases a race condition is as follows: // Defined routes { name: &ap ...

javascriptvue.jsvue-routervuexrace-condition