The Disable Button is malfunctioning as the text is deleted but the button remains enabled

One issue I am facing is that even after removing the numbers from the textboxes, the submit button remains enabled. Initially, when I enter inputs in the textbox, it enables the button, but even after removing a number, the button stays enabled.

This is the code snippet for my button. The textboxes have been assigned the ids "digit" and "digit1".

if ((document.getElementById("digit").value > 0) && (document.getElementById("digit1").value > 0)) {
  rand.removeAttribute('disabled');
} else {
  rand.setAttribute('disabled', 'disabled');
}
<input id="rand" type="submit" value="Submit" disabled>

javascript

Answer №1

The variable random was not defined correctly.

function verify(){
var rand = document.getElementById("rand");
if ((document.getElementById("digit").value > 0) && (document.getElementById("digit1").value > 0)) {
  rand.removeAttribute('disabled');
} else {
  rand.setAttribute('disabled', 'disabled');
}
}
<table style="border-collapse: collapse" width="100%">  
<form action="random" method="get" onSubmit="return validate()">
        <tr>
            <td>
            Lowest number: 
            <input id="digit" type="text" name="lowestnumber" onchange="verify(event)">
            <span id="numbers"></span>
            <br/>
            </td>
        </tr>
        <tr>
            <td>
            Highest number:
            <input id="digit1" type="text" name="highestnumber" onchange="verify(event)">  
            <span id="numbers1"></span>    
            </td>
        </tr>
        <tr>
            <td>
                <input id="rand" type="submit" value="Submit" onclick="verify()" disabled><br/>
            </td>
        </tr>
        <br/>
</form>
</table>

As stacksnippets.net is currently inaccessible, you can access the live fiddle here: https://jsfiddle.net/41xgLjw9/

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

Display Numerous Values Using Ajax

Having difficulty showing data from the 'deskripsisrt' table in a modal bootstrap? I have successfully displayed from the 'srtptr' table, but not sure how to proceed with the 'deskripsisrt' table. Here's a snippet from my ...

javascriptphpjqueryajaxtwitter-bootstrap

Displaying a page using express.Router()

I'm having trouble figuring out how to incorporate EJS rendering into a file utilizing express.Router(). The usual method of router.set('view engine', 'ejs') doesn't seem applicable in this context. Any ideas on how I can succ ...

javascriptnode.jsexpress

What is the best way to retrieve a state variable within the getServerSideProps() function in NextJS?

Introduction Greetings everyone, I am a newcomer to NextJS. Currently, I am in the process of developing a weather application that utilizes external APIs. My main task involves fetching data from an API and displaying it on the frontend. Desired Function ...

javascriptreactjsnext.js

JavaScript Event Listener not Working Properly

I've been attempting to implement a feature on my website where the header hides when scrolling down and re-appears when scrolling up. However, I'm struggling to make use of the code snippet below to achieve this functionality. Despite my thoroug ...

javascripthtmlcss

Experiencing issues with implementing shopping cart logic using KnockoutJS. Need help

The Objective Create a dynamic list of products. The Scenario Overview In my online shopping application, I want to showcase the products I add to my shopping list in a sidebar when I click the 'add button' for each product. Brief Problem Sum ...

c#javascriptasp.net-mvc-4razorknockout.js

The React app I've been working on has a tendency to unexpectedly crash when reloading the code from time

Dealing with a frustrating issue here. I've been working on an app and for the past few weeks, it keeps crashing unexpectedly. It seems to happen more frequently after saving my code to trigger a reload, but it can also just crash randomly while navig ...

javascriptreactjsrestdebuggingcreate-react-app

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

I am facing an issue while attempting to create a basic CSS transition using JavaScript. The goal is for the start button to trigger the movement of an element, based on the duration of the keyframe animation. Then, clicking the end button should make the ...

javascripthtmlcsscss-transitionscss-animations

Tips for adjusting the position of an infowindow in ArcGIS

I have implemented the use of infowindow in arcgis to display certain information. https://i.sstatic.net/Dnpas.jpg Currently, the infowindow is appearing directly over my icon. Is there a way to adjust its position if it covers the icon? ...

javascriptarcgisarcgis-js-api

The texture failed to load onto the 3D object during the mapping process

Issues with loading texture into the 3D ring model, although it works fine for other objects. No compile errors detected. Proper lighting conditions are set up but the color of the 3D model appears grey/black. The texture loads correctly for other object ...

javascriptthree.js

Using callback functions to handle parameters in GET requests

Hey there, I'm currently diving into the world of callback functions and I have a burning question that needs clarification. Adding event listeners seems easy enough: $0.addEventListener("click", function(event){console.log(event)}); When you click s ...

javascriptnode.jscallback

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

javascriptruby-on-railsjquery-uiautocompletecoffeescript

An element in AngularJS is replicated for a brief moment of 1 second

I am having trouble with my login form that displays an error message in a box. <div class="ui negative message" ng-if="vm.message != ''"> <span ng-bind="vm.message"></span> </div> The error message is being set in t ...

javascriptangularjsangular-ng-if

Setting up StrongLoop LoopBack MongoDB datasource for successful deployment on Heroku

Currently, I am utilizing LoopBack version 1.6 and have a local mongoDB server operational for development purposes with the following datasource configuration: "mongodb": { "defaultForType": "mongodb", "connector": "loopback-connector-mongodb", ...

javascriptmongodbherokuloopbackjsstrongloop

Calculate a value within a MongoDB field

Hello everyone, I have a document in my collection that looks like this: { Player_Name: Sandeep Nair Player_TotalWeightedPoints: 80 Player_Rank: 23 } I have around 200 similar documents in my collection. The Player_Rank is determined by the total Weighted ...

javascriptmongodb

Vue - Additional loading may be required to manage the output of these loaders

Currently working with Vue and babel. I have a function that's been exported // Inside file a.js export async function get() { ... } I am trying to link this exported function to a static method of MyClass // Inside file b.js import myInterface fr ...

javascriptvue.jsbabeljs

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

javascripthtmljquerysqliteweb-sql

Closing the Material UI dialog from an inner component

In my application, I have implemented a sign-in dialog using Material UI. However, I have separated the login button into its own component. I am trying to figure out how to close the dialog when the submit button in the SigninForm component is clicked. I ...

javascriptreactjsmaterial-uidialogmodal-dialog

Creating a interactive navigation bar with External JSON data in HTML and JavaScript

Is there a way to create a dynamic MenuBar by using an external JSON file? How can I write HTML code to fetch and display JSON data dynamically? What is the process for reading a JSON file? //JSON File = Menu.Json {"data": [{"id": "1", "text": "F ...

javascripthtmljsonajax

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

javascripthtmljqueryreplacewith

Experimenting with applying jquery .slideDown() to multiple classes in order to create dynamic animations

I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this? Here is ...

javascriptjqueryhtmlcss