jQuery — Enable or Disable Button

How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields

When a user starts typing in the HTML form field, browsers, by default, enable the autocomplete feature. Many users let their browsers collect form data allowing using autocomplete in forms in the future. However, there can be situations when this can not work accurately, or you might prefer that users manually insert all the information in details. Moreover, there might be a privacy concern for users, so browsers can let users disable it.

Some data presented in forms, however, are either not important in the future (such as a one-time pin) or include confidential information (such as a specific government identification or security code for bank cards). As the author of a website, you might prefer the browser not to remember the values for that kind of fields, even though the autocomplete feature of the browser is enabled. This allows the browser to offer autocompletion (i.e., display possible completions for the fields where the user has started typing) or autofill (i.e., pre-populate some fields on load).

How to Disable Autocomplete

To disable the autocomplete of text in forms, use the autocomplete attribute of and elements. You’ll need the «off» value of this attribute.

This can be done in a for a complete form or for specific elements:

1. Add autocomplete=»off» onto the element to disable autocomplete for the entire form.
2. Add autocomplete=»off» for a specific element of the form.

The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.

Let’s see an example where the autocomplete is set to «off» for the whole form and two elements.

Example of using the autocomplete attribute with the «off» value:

html> html> head> title>Title of the document title> style> input < margin: 5px 0; padding: 5px; > style> head> body> form action="/form/submit" method="get" autocomplete="off"> div> input type="text" name="Name" placeholder="First Name" autocomplete="off"> div> div> input type="text" id="lname" name="Surname" placeholder="Last Name" autocomplete="off"> div> div> input type="number" name="Credit card number" placeholder="Credit card number"> div> input type="submit" value="Submit"> form> body> html>

Let’s see another example. Here, you’ll need the following steps:

1. Add autocomplete=»off» to the element.
2. Add a hidden with autocomplete=»false» as a first child element of the form.

Example of disabling the autocomplete:

html> html> head> title>Title of the document title> style> input:not[type="submit"] < background-color: #ffffff; border: 1px solid #cccccc; padding: 5px; > input:-webkit-autofill < -webkit-box-shadow: 0 0 0 1000px white inset !important; > .hidden < display: none; > style> head> body> form autocomplete="off" method="post" action="/form/submit"> input autocomplete="false" name="hidden" type="text" class="hidden"> div> label for="name">Name input type="text" name="name" Id="name" placeholder="Enter Your Name"> label> div> br/> div> label for="email">Email input type="Email" name="email" Id="email" placeholder="Enter Your Email"> label> div> br/> input type="submit" value="Submit"> form> body> html>

There are two effects of setting autocomplete=»off » for your form fields:

1. Tells the browser not to save user-input data on similar forms for later autocompletion, although browser-specific algorithms vary.
2. Prevents the browser from caching form data in the session history. When the data of forms is stored in the session history, the information filled in by the user will be still displayed, even if the user has submitted the form and clicked the Back button to return to the initial form page.

As many users wouldn’t like the browser to remember passwords, modern browsers do not support the autocomplete=»off » for login fields. For login fields, there is no difference whether autocomplete is disabled for fields or fields.

When a website sets autocomplete=»off » for a or element, and username/password fields are included in it, the browser will still allow remembering these fields, and if the user accepts, the browser will autofill the fields the next time when the user visits that website.

In that way behave Firefox (since version 38), and Google Chrome (since version 34).

In the case, you represent a user management page where a user can specify a new password for a different user, and you don’t want to autofill password fields, use autocomplete=»new-password» , which is a sign for browsers that they are not required to react to it.

If Google Chrome remembers a login or password, it will change the background to yellow. To remove the background color, you can try the following.

Example of removing the yellow background from the field:

html> html> head> title>Title of the document title> style> input:-webkit-autofill < -webkit-box-shadow: 0 0 0 1000px white inset !important; > style> head> body> form action="/form/submit" method="GET"> div> label for="name">Name input type="text" name="name" Id="name" placeholder="Enter Your Name"> label> div> br/> div> label for="email">Email input type="email" name="email" Id="email" placeholder="Enter Your Email"> label> div> br/> input type="submit" value="Submit"> form> body> html>

There are some probably better ways of disabling the autocomplete and autofill with Javascript and jQuery. Let’s also see some examples with them before you can decide which is best for your code.

Example of disabling the autocomplete with Javascript:

html> html lang="en"> head> title>Title of the Document title> head> body> form action="/form/submit" method="post"> div class="form-group"> input type="text" name="username" placeholder="Enter Name"> input type="email" name="email" placeholder="Enter Email"> button type="submit"> Submit button> div> form> script> let tagArr = document.getElementsByTagName("input"); for (let i = 0; i < tagArr.length; i++) < tagArr[i].autocomplete = 'off'; > script> body> html>

Example of disabling the autocomplete using Javascript:

html> html lang="en"> head> title>Title of the Document title> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> form action="/form/submit" method="post"> div class="form-group"> input type="text" id="name" name="username" placeholder="Enter Name"> input type="email" id="email" name="email" placeholder="Enter Email"> button type="submit">Submit button> div> form> script> $(document).ready(function( ) < $('input').attr('autocomplete', 'off'); >); script> body> html>

Example of disabling the autocomplete with jQuery:

html> html lang="en"> head> title>Title of the Document title> script src="https://code.jquery.com/jquery-3.5.0.min.js"> script> head> body> form action="/form/submit" method="post"> div class="form-group"> input type="text" id="name" name="username" placeholder="Enter Name"> input type="email" id="email" name="email" placeholder="Enter Email"> button type="submit">Submit button> div> form> script> $(document).ready(function( ) < try < $("input[type='text']").each(function( ) < $(this).attr("autocomplete", "off"); >); > catch (e) <> >); script> body> html>

Example of disabling the autofill with jQuery:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> script> script src="https://terrylinooo.github.io/jquery.disableAutoFill/assets/js/jquery.disableAutoFill.min.js"> script> head> body> form action="/form/submit" method="post" id="login-form"> input name="username" type="text" placeholder="username" /> input name="password" type="password" placeholder="password" /> input type="submit" value="Submit"> form> script> $(function( ) < $('#login-form').disableAutoFill(); >); script> body> html>

Источник

How to disable an input type=text?

The disabled attribute can be set to keep a user from using the element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.,When present, it specifies that the element should be disabled.,The numbers in the table specify the first browser version that fully supports the attribute.,Tip: Disabled elements in a form will not be submitted!

Definition and Usage

The disabled attribute is a boolean attribute.

Answer by Laurel Hogan

Meta Stack Overflow , Stack Overflow Public questions & answers , GitLab launches Collective on Stack Overflow , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

document.getElementById('foo').disabled = true; 

document.getElementById('foo').readOnly = true; 

Answer by Molly McCoy

In this article, we get to know how to disable an input type=text by using the input disabled attribute. A disabled input is un-clickable and unusable. It is a boolean attribute. The disabled elements are not submitted in the form.,Supported Browsers: The browsers supported by disabled attribute are listed below:,How to set input type date in dd-mm-yyyy format using HTML ?,CSS to put icon inside an input element in a form

Answer by Andre Knapp

Alternatively, you can use the .attr() method to set the disabled attribute of the input element and .removeAttr() to remove the attribute from the input element.,When the element is disabled, it cannot accept clicks. To disable an input element, its disabled HTML attribute should be false.,With plain JavaScript, you can use the disabled property of the actual DOM object to enable or disable the input.,To set the input box disabled property to true or false with jQuery, you can use the .prop() function.

Alternatively, you can use the .attr() method to set the disabled attribute of the input element and .removeAttr() to remove the attribute from the input element.

Answer by Troy Fernandez

Let’s start off by using plain old JavaScript:,This is a short guide on how to disable input text fields using JavaScript. In this tutorial, I will show you how to accomplish this using both regular JavaScript and the JQuery library.,Let’s take the following text field as an example:,In the code snippet above, we referenced the input field by its ID using the getElementById() method. We then set its disabled attribute to true.

Let’s take the following text field as an example:

Let’s start off by using plain old JavaScript:

//Disabling a text input field with regular JavaScript. document.getElementById("name").disabled = true;

If you open up your browser’s developer tools and look at the DOM, you will see that the disabled attribute has been added to the field in question:

If you’re already using the JQuery library, then you might want to use the following example:

//Disabling a text input field using JQuery. $('#name').attr('disabled', true);

Answer by Ryder Cole

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields., Styling text Styling text overview Fundamental text and font styling Styling lists Styling links Web fonts Assessment: Typesetting a community school homepage , CSS building blocks CSS building blocks overview Cascade and inheritance CSS selectors The box model Backgrounds and borders Handling different text directions Overflowing content Values and units Sizing items in CSS Images, media, and form elements Styling tables Debugging CSS Organizing your CSS , Flexbox Basic concepts of Flexbox Comparison with other layout methods Aligning items in a flex container Ordering flex items Controlling flex item ratios Mastering wrapping of flex items Typical use cases of Flexbox Backwards compatibility of Flexbox

/* Selects any disabled */ input:disabled

Answer by Krew McBride

As part of our Flexiple tutorial series, in this article we will see how to Disable or Enable Checkboxes depending upon dropdown selection using Javascript. ,As part of our Flexiple tutorial series, in this article we will use two simple HTML pages. The first page will call the second page using a link and in the process using JavaScript, we will restrict the user from getting back to the first page (from the second page) using the Browser back button. ,If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)

//defining button and input field  

B) Javascript Code

//Program to disable or enable a button using javascript  

Complete Code

Using jQuery to enable/disable a button

     Name:     

Источник