Strange issue with Firefox when utilizing disabled attribute as "disabled"

I found a curious bug in Firefox:

Check out (unfortunately not reproducible in jsfiddle)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
<body>
 <button disabled="disabled">sdf</button>
 <script>
  jQuery(function(){
    if(!jQuery('button').is(':disabled'))
      alert('Is not disabled!');
    jQuery('button').removeAttr('disabled');
  });
</script>
</body>
</html>

Here's the issue I encountered:

  1. Upon initial loading, everything works fine.
  2. If I reload the page using Ctrl+r, an error message is displayed by the alert().
  3. However, if I refresh using Ctrl+Shift+r, the bug does not appear.

This problem persists on Microsoft® Windows® 7 with Firefox versions FF28 and FF29.

Any ideas on how to resolve this?

javascriptjqueryhtmlfirefox

Answer №1

It appears that the issue stems from the storage mechanism used for user input in form elements, where the button's state is being cached.

A potential solution can be found here: How can I stop Firefox from caching the contents of a textarea on localhost?

<button disabled="disabled" autocomplete="off">sdf</button>

Check out this example: http://jsfiddle.net/doktormolle/4ZLd9/show/

Answer №2

Simply use "disabled" instead of disabled = "disabled"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <body>
    <button disabled>sdf</button>
    <script>
      jQuery(function(){
        if(!jQuery('button').is(':disabled'))
         alert('Is not disabled!');
       jQuery('button').removeAttr('disabled');
      });
     </script>
  </body>
</html>

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

Are there any disadvantages to utilizing bindActionCreators within the constructor of a React component when using Redux?

I have come across numerous instances where the bindActionCreators function is used within the mapDispatchToProps function as shown below: ... const mapDispatchToProps = (dispatch, props) => ({ actions: bindActionCreators({ doSomething: som ...

javascriptreactjsredux

Ways to usually connect forms in angular

I created a template form based on various guides, but they are not working as expected. I have defined two models: export class User { constructor(public userId?: UserId, public firstName?: String, public lastName?: String, ...

javascripthtmlangularvalidation

Encountering difficulties with updating customer information in postgreSQL

I am attempting to perform CRUD operations using pg-promises and stored procedures in PostgreSQL. Here is my code: controller.js: const db = require("./../index.js"); exports.getAllData = async (req, res, next) => { try { const data = ...

javascriptnode.jspostgresql

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

I have a dropdown menu that dynamically populates its options with numbers. Here is the code for that: <select name="TheServices" id="services-selector"> <option value="" disabled selected hidden>Static Select ...

javascripthtmljquery

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...

javascriptjsonreactjs

Within the materia-ui table, I am facing an issue where clicking the button to expand a row results in all rows expanding. I am seeking a solution to ensure only the selected row expands

When a row is clicked, all rows in the data table expand to show inner data for each row. The issue is that clicking the expand button expands all rows rather than just the selected row. Each time I try to expand one specific row, it ends up expanding mul ...

javascriptmaterial-ui

What is the best approach to integrating AJAX calls with promises in the Angular framework?

I'm facing an issue while using Angular promises with the $q service in my controller. Here's the code snippet: var myController = function ($scope, myService) { $scope.doSomething = function (c, $event) { $event.preventDefault(); ...

javascriptangularjs

What is the best way to set up an anchor element to execute a JavaScript function when clicked on the left, but open a new page when clicked in

One feature I've come across on certain websites, like the Jira site, is quite interesting. For instance, if we take a look at the timeline page with the following URL - When you click on the name of an issue (which is an anchor element), it triggers ...

javascripthtmlvue.jsvue-router

Showing the Datepicker from jQuery right in the middle of the screen

Here's the generated code as default: <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper- clearfix ui-corner-all ui-datepicker-multi ui-datepicker-multi-2" style="width: 34em; position: absolute; left: ...

javascriptjquerycss

Dispatching current to the default case of the switch statement

Hello everyone, I wanted to share a snippet from my JS file: function passDataToPHP() { endpoint = 'myfile.php'; parameters = ''; parameters += 'action=passData'; parameters += '&myfield='+someV ...

phpjqueryajaxswitch-statement

Maximizing spacing for element alignment using space-evenly and :after

I have employed the pseudo-element :after to left-align the last line of a list of blocks, using space-evenly to justify these blocks. However, I am facing an issue where the blocks on the last line do not align properly with the others due to the space ta ...

htmlcss

Encode JavaScript field without affecting the appearance

I need to encode a specific search field before submitting it as a $_GET request. To do this, I am using the encodeURIComponent() function on that field before the form is submitted. $('#frmMainSearch').submit(function() { var field = $(this ...

javascriptjqueryformsgetencodeuricomponent

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

htmlcssflexboxflex-grow

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

As a novice in JavaScript/jQuery/AJAX, I have a suspicion that the issue lies in some typo that I may have overlooked. Everything was working perfectly, but when I made some edits, the hide() + show() methods stopped functioning (I tested it on both Firefo ...

javascriptjqueryajax

Improving the efficiency of my conditions in a function with Vue JS

Does anyone have any suggestions on how to optimize this function? I feel like it could be shortened to improve its efficiency. Any help or advice would be much appreciated. Function: onStudentActionSelect: function () { if (this.selectedRows.length ...

javascriptperformancefunctionvue.jsvuejs2

The combination of Ajax, JavaScript, PHP/HTML, and dynamic variables

Hey there, I'm currently working on a game development project and have encountered what seems to be a scope issue. The issue arises in my js file when a player clicks on the card they want to play: It starts in my js file:</p> <pre>&l ...

phpjavascriptajaxscope

React Native encountered an error: `undefined` is not an object

Encountering the commonly known error message "undefined is not an object" when attempting to call this.refs in the navigationOptions context. Let me clarify with some code: static navigationOptions = ({ navigation, screenProps }) => ({ heade ...

javascriptreactjsreact-nativereact-navigationreact-android

What are some ways to broaden the width of my footer div?

Can someone help me figure out why my footer div is not taking up all the available horizontal space? Below is my code, but it's not working as expected. Any assistance would be greatly appreciated! Markup: <div class="footer"> Copyright ...

htmlcss

Sending a multitude of variables using strings, evaluating them through various functions, and incorporating a variety of methods

To put it simply, my goal is to utilize an object literal that allows me to pass an unknown quantity of variables in any order to a function. While this may seem straightforward in principle, within my code, this object literal is passed to a second functi ...

javascriptajaxparametersevalobject-literal