Button disabled is not functioning properly

Question

Button disabled is not functioning properly

Does anyone know why my button is not being disabled when I am not typing in the textbox? Here is the code snippet:


$(document).ready(function () {        
    loadData();    
    function loadData(is_category) {   
        $(document).on('click', '.viewdetails', function () {
            var html = '';
            html += '<input type=text id="ConvoDetails">'<input type="submit" class="sendButton">';    
        },

        $('.sendButton').prop('disabled', true);
        $('#ConvoDetails').keyup(function () {
        $('.sendButton').prop('disabled', this.value == "" ? true : false);
    });            
});

javascript

Answer 1

Answer №1

Solution:

$('.sendButton').prop('disabled', 'disabled');

Consider updating your code to listen for the change event instead of keyup. The keyup event can trigger too frequently, leading to potential delays in performance.

Answer 2

Solution:

$('.sendButton').prop('disabled', 'disabled');

Consider updating your code to listen for the change event instead of keyup. The keyup event can trigger too frequently, leading to potential delays in performance.

Answer 3

Answer №2

To capture the key up event in your input HTML, you can use the following code snippet:

<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"

and then define a function to handle the event like so: onInputKeyUp(element) {}.

Moreover, there is no need for this line of code:

$('.sendButton').prop('disabled', true);

if you initially set your input button as disabled using:

<input type="submit" class="sendButton" disable>

Below is the complete code example:

$(document).ready(function () {

  loadData();

    function loadData(is_category) {

    $(document).on('click', '.viewdetails', function () {

        var html = '';
        html += '<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"><input type="submit" class="sendButton" disable>';
    });
});

onInputKeyUp(element) {
    element.disabled = element.value == "";
}

Answer 4

To capture the key up event in your input HTML, you can use the following code snippet:

<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"

and then define a function to handle the event like so: onInputKeyUp(element) {}.

Moreover, there is no need for this line of code:

$('.sendButton').prop('disabled', true);

if you initially set your input button as disabled using:

<input type="submit" class="sendButton" disable>

Below is the complete code example:

$(document).ready(function () {

  loadData();

    function loadData(is_category) {

    $(document).on('click', '.viewdetails', function () {

        var html = '';
        html += '<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"><input type="submit" class="sendButton" disable>';
    });
});

onInputKeyUp(element) {
    element.disabled = element.value == "";
}

Button disabled is not functioning properly

Answer №1

Answer №2

Similar questions

Storing Radio Buttons and Checkboxes Using LocalStorage: A Simple Guide

The static folder in Express server is failing to serve files

Prevent background music from being manipulated

Issue with redirect using Node.js promise

The necessary directive controller is missing from the element in the current DOM structure

Use ajax, javascript, and php to insert information into a database

Show a decimal value as an integer in Razor

Get back a variety of substitutions

How can I employ CSS files within a Node module that is compatible with Next?

Parent window login portal

Building a Next.js application that supports both Javascript and Typescript

Show or conceal a child component within a React application

Having Trouble with Your React.js Rendering?

JavaScript or Query: Transforming an Object from an Associative Array

Storing jQuery output in a global variable can be achieved by assigning the result

Commitments and incorporating items from an array into objects nested within a separate array

Creating a worldwide object in JavaScript

Tips on invoking a method from a JavaScript object within an AJAX request

Using Angular JS for Traditional Multi-page Websites

Storing JSON strings in PHP differs from storing them in JavaScript