What is the best way to reset input autocomplete styles?

I am working with a basic Bootstrap form that is submitted using JavaScript. Upon clicking the submit button, the data is processed and the input values are reset without the need to reload the page:

if( json.success ) {
  $('#form_sendemail').find('.form-control').val('');
}

The issue I am facing is that when there are autocompleted fields in the form (highlighted in yellow in Chrome), they remain highlighted even after the form is submitted and the fields are cleared. How can I remove these styles without refreshing the page? (changing the background-color with !important did not work).

https://i.sstatic.net/jJBWi.png

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give the reset function a try:

$.ajax({
    //...
    success: function (data, status) {
        document.getElementById('formToReset').reset();
    }
});

<form id="formToReset"></form>

UPDATE:

Use JQuery for a smoother experience:

$.ajax({
    //...
    success: function (data, status) {
        $('#formToReset')[0].reset();
    }
});

Answer №2

Give this a shot

For Chrome Users

input:-webkit-autofill {
    background-color: #FAFFBD !important;
color: #2a2a2a !important;
}

Custom Script

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', '#fff');
   $(this).css('color', '#000');
});

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

What strategies do developers use to manage front-end dependencies in projects that are not part of any specific

Although I am well-versed in using NPM for front-end projects, I am interested in understanding how others manage front-end dependencies for non-application based "brochure-site" projects. For instance, if I am working on a WordPress theme and need to inc ...

jquerynode.jswordpressgitnpm

Troubleshooting Codeigniter CJAX Installation: Handling Errors

I am currently attempting to integrate CJAX with Codeigniter, but I'm encountering some difficulties with the official documentation. Despite my best efforts, I've been unable to successfully implement it. After downloading CJAX and extracting i ...

javascriptphpajaxcodeignitermod-rewrite

How to divide a string by space after a specific character count using Javascript

I've been working on a tool that can divide input text into chunks based on a specific character count without breaking words in the process. Currently, I have set it to split the text after 155 characters. Even after conducting extensive research, ...

javascripthtml

Is there a way to display the result array in Node.js after a MongoDB find query has been executed?

I'm new to Node.js and I'm trying to pass an array of data to a controller. However, I'm facing some challenges in inserting for loop data into the array and also looking to access the resulting data outside the function. router.get("/list- ...

javascriptnode.jsexpress

What is the most efficient way to evenly separate a CSS3 gradient?

Is there anyone who can assist me in achieving an even gradient break? body { height: 2500px; background: -webkit-linear-gradient(#000000 1%,#FFFFFF 1%,#FFFFFF 13%,#2ecc71 13%,#2ecc71 30%,#3498db 30%,#000000,#FFFFFF,#34495e); } I've been att ...

htmlcss

How to utilize jQuery to extract a portion of a lengthy string delimited by specific

I have a single string let input = "T-shirt SKU-TST071815-BLACKTHAMB (Code: 111R)" I need the following output let output = "TST071815-BLACKTHAMB" "T-shirt SKU-TST071815-BLACKTHAMB (Code: 111R)" is constantly generated by the database and changes eve ...

javascriptjquery

Order of AngularJS Scope.on and Scope.emit Invocation in a Filter

One of the challenges I am facing involves watching a value in one controller that is changed in another controller within my filters. The goal is to determine whether an emit should be triggered based on the updated value. Here's the current situatio ...

javascriptangularjs

React is unable to locate an import statement for Material UI components

I am facing an issue while incorporating material UI components into my React project. The error message I receive is related to an invalid import. Snippet from My Component File import React from 'react' import './middle.css' import Mi ...

javascripthtmlreactjsmaterial-ui

Having trouble getting the Html onload function to work in Google Sheets App Script?

I'm working with google sheets and I'm in the process of creating a document to track employees who are currently out of the office. I have added a menu option that allows me to remove employee data, which triggers the opening of a sidebar contai ...

javascriptgoogle-apps-scriptgoogle-sheets

Floating Div Elements

Trying to solve this seemingly simple problem has been quite the challenge for me. I have a container with multiple divs added to it, and I want these divs to position themselves freely within any available white space. However, they must follow a pattern ...

htmlcss

Exclude the header HTML when exporting data to a file with jQuery DataTables

I've encountered a problem with my simple data table. I added a custom tool-tip div in the datatable for the headings, following this reference. However, when I export the file to excel or PDF, the tooltip text is also included in the exported file. ...

jqueryangulardatatablesdatatables-1.10

When the web driver fails to function as expected

After installing the selenium-webdriver via npm, I downloaded the IE component from this link and added it to my path on Windows 8. Upon opening IE, I had to set all security zones to high, ensuring they were consistent. However, due to restrictions in th ...

javascriptnode.jsseleniumselenium-webdriver

Changing the Appearance of the RStudio Editor

I am exploring options to customize an RStudio Editor Theme to personalize the colors. My current setup includes RStudio version 0.99.473 on Windows 10. After reviewing Any way to change colors in Rstudio to something other than default options?, which wa ...

cssthemesrstudioace-editor

What is the best way to calculate the number of div elements with a specific class that are contained within parent div elements with another specific class?

Is there a way to count the number of elements with the class '.child' in each container and then add a sentence containing that count inside each container? <div class='container'> <div class='child'></di ...

javascriptjqueryhtml

Creating a custom autocomplete search using Angular's pipes and input

Trying to implement an autocomplete input feature for any field value, I decided to create a custom pipe for this purpose. One challenge I'm facing is how to connect the component displaying my JSON data with the component housing the autocomplete in ...

javascriptjsonangulartypescriptinput

Having trouble obtaining data from the database and showing it on the webpage

I am encountering an issue with displaying content from a database named resources and a table within it also named resources. The code snippet causing trouble is as follows: mysql_connect('localhost', 'username', 'password', ...

phphtmlmysql

Angular = encountering an incorrect array size limitation

I am encountering an issue with the function in my controller... $scope.pagerPages = function (n) { var i = Math.ceil(n); return new Array(i); } The n value is derived from an expression on the view and can sometimes be a fraction. This is why I ...

javascriptarraysangularjsceil

redactor.js: Disable backspace functionality when cursor is at the start of a div-container

Currently, I am working with the redactor.js editor that utilizes editable div containers. A challenge I have encountered is when multiple contenteditable containers are nested; deleting content using the backspace button can inadvertently delete the entir ...

javascriptjquerycursor

A guide to using JavaScript to retrieve a CSV file in HTML and store its contents in an array

I am currently working in AngularJs with the objective of uploading a file and saving it as an array using JavaScript. Below is my HTML code: <input type="file" id="uploadFile" name="uploadFile" accept=".csv" required /> <button ng-click="proces ...

javascripthtmlarraysangularjs

Tips for adding an array to a formData: incorporating an array with two values along with their corresponding keys

Snippet : const options = new RequestOptions({ headers: headers }); let myArray; myArray = [{ "subfolder_name": subfolder, "file_upload": file }]; let formData: FormData = new FormData(); formData.append("folder_name",folder ); formData.append("counse ...

javascriptangularjsmultipartform-data