Learn how to lớn enable or disable buttons using javascript & jQuery based on whether the đầu vào field is filled or empty.

Bạn đang xem: Jquery

If you are a beginner or not very familiar with javascript or jQuery, we recommkết thúc that you go through the entire article. However, if you are just looking for the code, click here!

Table of Contents

Introduction to disabling/enabling buttons

Often while filling out web forms have sầu you noticed how the submit button just won"t work unless we have sầu filled all the required
fields?This is done by controlling the state of the button (enabled/disabled) based on whether the đầu vào field is filled or empty. The same principle applies to checkboxes & radio buttons.Do you wish khổng lồ implement such a feature on your website size too? Read on!Before diving inlớn the code let us first look at the xúc tích và ngắn gọn behind toggling between different states of the button.

Logic behind toggling between disabled và enabled states of buttons

Set button to lớn disabled state in the beginningIf the đầu vào value of the required field is empty, let the button remain disabled. (Disabled state = TRUE) If the input đầu vào value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE)Below, we are going to lớn see how to disable/enable a button with one required text field implemented using Javascript and jQuery.

Code Implementation for changing the state of the button

1. Using Javascript

A) HTMLAdd the following HTML Code lớn your editor

//defining button & input đầu vào fieldinput class="input" type="text" placeholder="fill me">button class="button">Cliông chồng Me/button>
Code Explanation Using the above sầu code we have sầu defined two HTML elements namely an đầu vào text field and a button.B) Javascript Code
//Program lớn disable or enable a button using javascriptscript>let đầu vào = document.querySelector(".input");let button = document.querySelector(".button");button.disabled = true; //setting button state to disabledinput.addEventListener("change", stateHandle);function stateHandle() if (document.querySelector(".input").value === "") button.disabled = true; //button remains disabled else button.disabled = false; //button is enabled /script>
Code Explanation 1. Now, using javascript we store a reference to lớn each element, namely đầu vào, and button.2. By mặc định a button"s state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.3. Then we add an event handler (addEventListener) khổng lồ the đầu vào field with the event property change
which monitors the interaction with elements. 4. Here we use the change property lớn monitor when the user types text inside the input đầu vào field and run a function accordingly.5. The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input đầu vào field.6. The function compares the value of the đầu vào field (the text field) with an empty string. 7. If the user has not typed anything, then the text field will be equal ( === ) khổng lồ the empty string & the button will remain disabled (disabled = true).8. If the user inputs text in the đầu vào field, then the button will get enabled (disabled = false).Complete Code
OutputA) Inactive sầu State

The button is disabled as the text field is emptyB) Active sầu State
The button is enabled as the text field is not emptyUsing jQuery lớn enable/disable a button
1. For the jQuery method too, we start by creating an HTML button & text field (submit và tbName respectively) và setting the button to lớn disabled state initially.2. Here the ready() function is used to lớn make the function available once the document has been loaded.3. The .on() method in jquery attaches the event handler khổng lồ the input đầu vào field (tbName). 4. The change
sự kiện will check for changes in the input đầu vào field & run the function accordingly.5. Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled. 6. Here the .prop() method is used to change the state of the button.

Xem thêm: Cách Làm Thịt Rán Lá Lốt Ngon Thịt Mềm Ngọt Không Bị Khô, Cách Làm Chả Lá Lốt Thơm Ngon Cho Cả Nhà


You can play around with the above code using this editor và see which part of the code does what. You can also try out different CSS options for the button etc.

Join our exclusive sầu tech freelance network & work with top startups & companies!

Explore opportunities!

Other tutorials

Undefined vs Null in Javascript

How to lớn check for array equality using Javascript?

Implementing Bubble Sort in Javascript

How khổng lồ Craft a Freelance Resume as a Developer

Dev Shops – What are they, và when to use them?

Upwork Reviews và Alternatives for Hiring Developers

As part of our obatambeienwasirherbal.com tutorial series, in this article we will use two simple HTML pages. The first page will Hotline the second page using a liên kết và in the process using JavaScript, we will restrict the user from getting back to lớn the first page (from the second page) using the Browser baông chồng button.

As part of our obatambeienwasirherbal.com tutorial series, in this article we will see how lớn Disable or Enable Checkboxes depending upon dropdown selection using Javascript.