Toggle Button Control

In my PHP file, I have a submit button for the form coded like this:

 <input type="submit" name="submit" value="submit" disabled="true" />

Next, I initiate an asynchronous request using a request object,

document.getElementById("username").onblur=function(){ 
username(this.value);
 };

function username(value)
{
request = createRequest();
if(request==null) {
alert("Unable to create request");
return;
}
var url= "sign_up.php?value=" +
escape(value);
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
checked = document.getElementById("check");
checked.innerHTML = request.responseText;
document.getElementById("submit").disabled="false";
}
}
} 

Essentially, it's checking the availability of a username and enabling the submit button if the entered username is available. However, the button doesn't seem to enable as expected. Can anyone shed light on why this might be happening?

Answer №1

Remove the quotation marks, as you have mistakenly assigned the string "false" to the disabled attribute of the HTML element. Update the final line to read like this:

document.getElementById("submit").disabled = false;

Answer №2

Turn off:

let submitButton = document.getElementById("submit");
submitButton.setAttribute('disabled', 'disabled');

Activate:

let submitButton = document.getElementById("submit");
submitButton.removeAttribute('disabled');

Answer №3

Latest jquery implementation

$("#username").blur(function(){
    $("#submit").attr("disabled","disabled");
    $.ajax({
        method: "GET",
        dataType: "html",
        url: "sign_up.php",
        data: {
            cmd: "check_username",
            value: $(this).val()
        },
        success: function(data){
            $("#check").html(data);
            $("#submit").removeAttr("disabled");
        },
        error: function(){
            $("#check").html("ajax error");
            $("#submit").removeAttr("disabled");
        }
    });
});

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

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I prefer not to include external JavaScript on my website for unnecessary tracking purposes. However, I do need to gather referrer and screen size information, which cannot be achieved with a regular HTML img tag alone. What is the most standard-complian ...

Create a regular expression that permits a sequence of numbers (either integer or decimal) arranged in groups of up to five, with each

Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...

What is causing the issue of the div not being removed from the label renderer in three.js

Hello, I've been trying to solve this issue for the third time now without much success. The problem I'm facing is related to creating a div at runtime and then attempting to remove it after clicking on it. Although I've tried removing the d ...

Using Vuetify to send a parameter from a select option to a method as a parameter

Just starting out with vuejs and encountering an issue passing parameters from a selected option to my JavaScript method. In my updateClientIsMaster method, the item is always undefined. However, when I added v-on:change="updateClientIsMaster in the & ...

Parsing JSON data using PHP and AJAX decoding

I have been searching for a way to pass parameters between the server and client, but I am struggling to find a solution that works. Despite reading extensively online, I have not been able to come up with a functioning solution. Client Side function sen ...

Passing an anonymous function as a parameter to a function in ng-init is a common practice in AngularJS v1.4.8

Is it possible to save a call to an anonymous function using ng-init? For example: <div class="container-fluid" ng-app="AVF" ng-controller="ConfigController" ng-init="RegisterInitFunction(function() { $scope.GetData(); })" > In my controller: ...

Switch between hiding and showing the DIV element flaw

I am currently working on a piece of code that involves simple HTML and JS to show/hide elements. Here is the code snippet: // Enabling forEach for 'querySelectorAll' and 'getElementsByClassName' HTMLCollection.prototype.forEach = No ...

Troubleshooting the issue with default useAsDefault routing in Angular 2

I have implemented Angular 2 for routing and Node for local hosting. However, I encountered an issue where using 'useAsDefault:true' for my route caused the nav bar links to stop functioning properly. The URL would redirect to http://localhost/ ...

Creating a Vue single-page application (SPA) and concealing the .vue files upon rendering in the

I have a Single Page App built using Vue.js and hosted on a node.js server. While the app is still in development, it will eventually be accessed by external customers. Due to the sensitive data involved, we want to prevent users from seeing the .vue files ...

Are there any cross-platform inter-process communication APIs available in both C++ and Javascript?

In the process of developing an app, I am faced with the challenge of passing messages between a C++ application and a Javascript web app. While I have experience writing sockets code in both languages when required, I am now looking for a higher-level me ...

Issues with Angular's http get functionality not functioning as expected

I'm experimenting with an API on apiary.io and attempting to retrieve data from it using Angular, but I'm encountering issues with the call. The setup seems straightforward, so I'm not quite sure what's causing the problem: HTML: < ...

Creating a unique Angular JS / Material / Datatables application - Proper script loading sequence required based on page context

My top two declarations placed above the closing body tag. When used in a material dropdown page, the current order of these scripts works fine. However, when I switch to my datatables page (which is a separate page), I need to swap the order of the two s ...

Is there a way to execute a function after EACH user interaction?

I am in the process of developing a React Native kiosk application for an Android tablet that will be mounted on a wall. The main requirement is to include a "screen saver" feature, where if the user does not interact with the screen for 30 seconds, it wil ...

Retrieve only the items from a JavaScript array where the index is below a specified value

My goal is to filter out all the items from the initialItems list that have an index lower than the current item. For example, if the current item is CM, I want to display QS, IT, and AB in a draggable dropdown menu. However, I'm unsure of how to prop ...

"Use Highcharts to visually compare the data from one month in two different years

How can I use Highcharts Columns to compare data from two different years within the same month? Check out the example image below: https://i.sstatic.net/8MMsA.png The data structure is as follows: myData[0] = { data1:"0.00", data2:"0.00", data3:"868.0 ...

PHP cannot access JSON encoded data retrieved from Codeigniter through AJAX

I am currently working on implementing a live search feature in a CodeIgniter file using AJAX autocomplete. $(this).ready( function() { $("#id").autocomplete ({ minLength: 1, source: function(req, a ...

Script for updating tables using AJAX

I have just completed coding a script for my online tile-based game that dynamically generates the surroundings (tiles) based on your current location in the game area. The game itself is built using a table with multiple cells to hold these tiles. Howeve ...

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...

Developing a Mongoose organization/class framework?

Currently, I'm in the process of developing a web application using Node.js, Express, and Mongoose/MongoDB. An important query has arisen regarding how to effectively organize and structure methods related to Mongoose. It's necessary for me to u ...

Which frameworks are categorised under Express-based frameworks?

Considering a job opportunity to develop a web app, one of the requirements is to "use node.js with an express based framework." My understanding is to use node.js with express.js, but what exactly does an express based framework entail? Does it refer to ...