Autocomplete attribute of HTML is use to fetch previous input values in input fields.

Almost all browsers supports autocomplete attribute, by default this attribute is “on” in html.



If you want to disable this attribute ,you can set autocomplete=”off” in html input tag.

<input class="text" name="name" type="text" autocomplete="off">

 


Here, we will show you how you can do this with jQuery.

$("form").attr('autocomplete', 'off');

 


 Below is our complete code with download and live demo option

disable_auto_complete_form_field_jQuery


HTML file: Disable_autocomplete.html


<!DOCTYPE html>
<html>
<head>
<title>Disable auto-complete in Form - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here-->
<link href="css/style.css" rel="stylesheet"
><!-- Include JS File Here-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/disable_autocomplete.js"></script>
</head>
<body>
<div class="main">
<div class="first">
<h1>Disable auto-complete in Form</h1>
<form>
<label>Name :</label>
<input class="text" name="name" type="text">
<label>Email :</label>
<input class="text" name="email" type="text">
<label>Message :</label>
<textarea class="text" rows="8">
</textarea>
<input class="send" type="submit" value="Send">
<button id="btn">Disable Auto-Complete</button>
<button id="btn1">Enable Auto-Complete</button>
</form>
</div>
</div>
</body>
</html>

 

JS file: disable_autocomplete.js


$(document).ready(function() {
$("#btn").click(function(e) {
e.preventDefault(); // To Prevent Form Submission Through This Button
$("form").attr('autocomplete', 'off'); // Switching form autocomplete attribute to off
$("#btn").hide();
$("#btn1").show();
});
$("#btn1").click(function(e) {
e.preventDefault(); // To Prevent Form Submission Through This Button.
$("form").attr('autocomplete', 'on'); // Switching form autocomplete attribute to on
$("#btn1").hide();
$("#btn").show();
});
});

 

CSS File: style.css


@import "http://fonts.googleapis.com/css?family=Droid+Serif";
/* Above line is used for online Google font */
h1{
text-align:center
}
div.main{
width:970px;
height:655px;
margin:50px auto;
font-family:'Droid Serif',serif
}
div.first{
width:424px;
height:623px;
float:left;
padding:15px 60px;
background:#f8f8ff;
border:1px dotted #ccc
}
.text{
width:404px;
padding:10px;
margin-top:10px
}
.send{
font-size:17px;
border:1px solid gray;
padding:7px 35px;
background-color:#E7E7E7;
margin-left:35px;
margin-top:15px;
cursor:pointer
}
button#btn{
font-size:17px;
border:1px solid gray;
padding:7px 35px;
background-color:#E7E7E7;
margin-left:16px;
cursor:pointer
}
button#btn1{
font-size:17px;
border:1px solid gray;
padding:7px 35px;
background-color:#E7E7E7;
margin-left:16px;
cursor:pointer;
display:none
}

Pabbly Form Builder


Conclusion:

The above mentioned method is of the one way to disable autocomplete of form fields , there are some other ways to do it,  however we will publish them later. Keep following us for getting more coding tricks.

Get more informative stuff here –