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);
    });            
});


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

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 == "";
}

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

Error with Cross-Origin Resource Sharing (CORS) upon inserting a parameter within an Express application

I'm completely stumped as to why this isn't functioning properly. My express app is deployed on Heroku and here's the code: var urlMetadata = require('url-metadata') var express = require('express') var cors = require( ...

What is the purpose of the video-js endcard plugin incorporating native controls into the player?

Endcard is a unique plugin designed for the video-js html5 video player that adds clickable links to the end of a video. (More information on endcards can be found here: https://github.com/theonion/videojs-endcard). To implement an endcard, simply include ...

What is the best way to showcase a chart using jquery?

Is there a way to incorporate trendlines or target lines in highcharts similar to fusion chart? I have been able to draw them successfully in fusion charts. Check out this fiddle link: http://jsfiddle.net/Tu57h/139/ I attempted to recreate the same in hi ...

What is the proper way to utilize --legacy-peer-deps or enforce in a vite build?

I encountered an issue with a package called react-typed in my project. To install it, I had to use --legacy-peer-deps. When deploying, I need to use vite build. However, when I run the command, I receive the following errors: 8:59:31 AM: npm ERR! node_mo ...

The utilization of $(this) proves to be ineffective

I've been working on getting a script to add events to a specific DIV within a class using pep.js: $( ".drag" ).pep({ start: function() { $(".drag").addClass('color'); $('.drag').next(".text").fadeIn("slow"); ...

JavaScript library jQuery is unable to locate the element tagged as "<."

I've encountered an issue with setting the value of dropdown options in a web page using strings that contain < and >. Here is an example code snippet: <select id="m" name="m" > <option value="" selected="selected" >All</option& ...

Can anyone provide a method for obtaining a date that is x days earlier through date arithmetic?

Is there a method to obtain the date from 63 days ago with only day, month, and year information needed, excluding hours, minutes, and seconds? I am aware that one can calculate Date object - Date object, but I am curious if it is feasible to derive a dat ...

Troubleshooting the issue with utilizing the ng-repeat directive to loop through images in Angular JS

Embarking on my initial website development journey with Java and Spring Boot, I've hit a stumbling block in the front-end realm. Being a newbie, I'm struggling to identify and resolve the issue at hand. Problem title: How do I ...

Problem with the getJSON function

Here is a question that has been bothering me: I am currently working on a barcode scanner script which retrieves data from a JSON file. The script itself functions properly, except for one issue. After the while loop, I want to display an error alert m ...

Conflict between iOS 7+ swipe back gesture and stateChange animations

When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...

Unveil the content of a string by applying Base64 decoding in AngularJS

After encrypting a token sent from JAVA code to Angular using Base64 encryption, the next step is decryption: String token = "1345BCHCNB"; Cipher ecipher = Cipher.getInstance("AES"); String mykey = "1234567891234567"; SecretKey key = new SecretKey ...

Puppeteer: How to wait for an ajax call to complete after a navigation event

When working with my code, I encounter a situation where I need to submit a form, wait for navigation, and then submit a second form. The challenge arises because before submitting the second form, some data needs to be loaded in the form using ajax. I wa ...

Guide for ordering a query by the most recent updatedAt within a nested one to many relationship

I'm dealing with a set of interconnected entities structured as follows: Entity1 -> Entity2 -> Entity3 (illustrating one-to-many relationships with arrows) I am utilizing MikroORM for this purpose. Is there a way to construct a findAndCount q ...

Utilizing the Power of GrapesJs in Vue3

Recently, I attempted to integrate the GrapesJS editor into my Vue.js project, but encountered some difficulties. The editor was not visible in the browser, and the designated tag for the editor appeared empty. Here is my editor configuration: <template ...

React app experiencing issues with onClick button methods not functioning as expected

Here is the React code for a sample homepage. My intention was to have the function run and update the page when the buttons are clicked. However, instead of updating the page, it keeps showing alerts. I have confirmed that the fetch function is pulling da ...

Prevent Buttons from Being Clicked While Another is Active in Angular

I am facing a challenge with my Angular functions that enable search features. My goal is to allow only one feature to be selected at a time. /* Trauma Search functionality */ $scope.traumaSearch = false; $scope.traumaText = "Trauma Center"; $scope.togg ...

Struggling with incorporating a lightbox within an accordion feature in an .html file

I'm currently attempting to integrate this lightbox into this accordion feature. Individually, I've managed to get both elements up and running smoothly. However, when trying to combine them on the same page (regardless of nesting one inside the ...

How can the hreflang tag be used correctly in a React application that supports multiple languages?

I have a React application with 3 pages(routes) and I support 2 languages (English and Spanish). Should I insert the following code into the <head></head> section of the public\index.html file like this? <link rel="alternate" ...

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

I have been attempting to extract only the "steamid" from an AJAX link without success. Could someone please provide some assistance? Here is the link to find and retrieve only the "steamid": here This is the code I have tried: var xhttp = new XMLHt ...

Having trouble sending messages on the server?

Programmer Seeking Help with Adding Data on the Server using JavaScript Stack I am encountering an issue with my javascript code as I am attempting to use the post method to add data on the server-side, but it seems to not be posting successfully. Can ...