What is the best way to automatically clear an input field after a specified delay?

On my landing page, I have a single input field where users can enter their email address. Upon successful entry...

success: function(result){
  console.log(result.status);
  if(result.status == true) {
    $('input').attr("style", "color:green");
    $('input').delay(5000).val("");
  } else {
    $('input').attr("style", "color:red");
    $('input').delay(5000).val("");
  }
}

However, I'm facing an issue where the delay function does not seem to be working as intended. Am I making a mistake or is there another way to approach this?

javascriptjqueryhtmlcss

Answer №1

delay specifically functions with animation techniques. Instead, consider employing the setTimeout function:

success: function(response){
    var color = response.status ? 'green' : 'red';
    var $inputField = $('input').css("color", color);
    setTimeout(function() { $inputField.val(''); }, 5000);
}

Answer №2

setTimeout(() => { $input.value = ""; }, 5000);

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

Activate Popover with Hover and simply click anywhere to dismiss

Currently utilizing Bootstrap 4 and intrigued by the popover feature that activates on hover and closes when clicked anywhere. I'm also interested in making links functional within the popover. Any suggestions or tips on how to achieve this? $(doc ...

javascriptjqueryhtmlbootstrap-4popover

Express server consistently receives JSON requests that contain no data in the request body

Currently, I am in the process of developing a small server and website using Express. At this point, my goal is to send a POST request to my Express server with basic credentials encoded as JSON. The issue I am facing is that no matter what I attempt, th ...

javascriptjsonexpressbackendfetch-api

Invoking a JavaScript class using a script tag

In my code, I have a class declaration in a script that is imported before the body tag: $(document).ready(function(){ var FamilyTree = function() { }; FamilyTree.prototype.displayMessage=function() { alert("test"); } }); Then, within the bo ...

javascriptclass

What could be causing the issue where Ruby on Rails date picker isn't updating the database? Any suggestions for troubleshooting

On my checkout page, I want to incorporate a form with 3 delivery choices using a date picker. Although I have successfully implemented the form on the page by using code from another site, I am facing an issue where the selected dates are not being store ...

jqueryruby-on-railsdatepickerjquery-ui-datepickerbootstrap-datepicker

Viewing the XML response generated by a JavaScript file (SOAP Request) on the IIS server

My current setup involves utilizing a calendar system with an API accessible via SOAP requests on an IIS server. Initially, my approach was to create an HTML page and use JavaScript to display the SOAP request response. However, the response did not retur ...

javascriptphphtmlxmlsoap

ngClass causing styling issue when applying styles

When I use class names like error and info, the CSS works fine. For example, in this Angular app (latest version) here: https://stackblitz.com/edit/github-i4uqtt-zrz3jb. However, when I try to rename the CSS classes and add more styles, like in the examp ...

cssangularjstypescript

Managing the JSON response in jQuery AJAX: Best practices

In response to my ajax call, I need to iterate over the JSON array and update the title of each corresponding button on my page with the value of the Letter element. Instead of using alert(response);, I should use a loop to access each element in the array ...

jquery

How do I switch between liking and unliking a post using Ajax's success response?

I have successfully implemented code to insert or delete likes from the database, and it functions correctly upon page refresh. However, I am struggling to figure out how to make it toggle upon clicking. I have attempted various online solutions without su ...

phpjqueryajaxtoggle

Difficulty arises when trying to extract specific information from an ajax response using the jQuery.filter

The code snippet below seems to be causing some trouble. It's supposed to filter HTML content that includes a div with the class "filtered_entries_box", but it's not working as expected. $.ajax({ "url" : "start.php", "type" : "POST", ...

javascriptjqueryhtmlajax

Resolving Route Problems in Node.js with Express

Currently, I am in the process of developing a website using Express and NodeJS. One issue that I have encountered is related to routing. In my app.js file, I have defined a route that expects a parameter like so: app.get(['/purchase/:purchaseID&apos ...

javascriptnode.jsexpressroutes

Update the display immediately upon a change in the state

In my app.js file, the code looks like this: export const App = () => { const [selectedMeals, setSelectedMeals] = useState<string[]>(["allItems"]); const onCheckHandler = (e: any) => { const checkedValue = e.target.value; if (e.targ ...

javascriptreactjsrerender

Issue with Mootools Ajax call and form submission

I'm dealing with a table that displays data from a database. I'm trying to implement a way to (a) delete rows from the table and (b) edit the content of a row in real-time. Deleting rows is working perfectly, but editing the content is proving to ...

phpjavascripthtmlajaxmootools

Tips on incorporating an external JSON file into a javascript variable for global accessibility

I have been utilizing a JSON file in my project with the following structure: <script src="js/main.js"></script> <script> var data = {"bills":[{"id":1,"name":"DStv","reference":"SmartCard Number","logo":"bill\/logo\/24 ...

javascriptjqueryjsonajax

Leveraging body-parser alongside formidable

I am currently in the process of integrating formidable to handle forms that involve file uploads (specifically images). Despite comments suggesting otherwise, I came across a comment demonstrating successful integration of both modules. This snippet show ...

javascriptnode.jsexpressbody-parserformidable

Creating colorful containers using Bootstrap

Hey there, I am interested in creating small colored boxes to represent different meanings for each color. I came across this code snippet but I am unsure how to adjust the size: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</d ...

htmlcssbootstrap-4

Could you explain the purpose of the usage section in a CodeMirror 6 language pack?

When you visit (for example) https://github.com/exercism/codemirror-lang-elixir?tab=readme-ov-file, you will see the following code snippet: import { StreamLanguage } from '@codemirror/language' import { elixir } from 'codemirror-lang-elixir ...

javascriptnode.jsnpmcodemirrorcodemirror-6

PWA JavaScript struggling with GPS geolocation coordinates

I am experiencing issues with the GPS coordinates being stuck when using geolocation in a Progressive Web App (PWA). Sometimes, the coordinates get stuck at the previous location, even if the user has moved since then. I suspect that this is due to the GP ...

javascriptjquerygeolocationgpsprogressive-web-apps

Listener for clicking on a marker in Google Maps

Trying to add a click event to Google Map markers in my Cordova app has proven to be quite challenging. The recommended ways mentioned in the documentation don't seem to work, unless I make the marker draggable - which is not an option for me. It seem ...

javascriptangularjscordovagoogle-mapsgoogle-maps-api-3

"JavaScript throws an 'Undefined' error when trying to access a basic

I am struggling with a basic set of HTML and JS files that are not functioning properly, and I can't seem to pinpoint the issue: <html> <head> <script type="text/javascript" src="data.json"></script> < ...

javascriptjson

Combining MongoDB properties into a Node.js variableWould you like to know how

Currently, I am in the process of creating a mongodb query in a variable within node js based on certain conditions. Unfortunately, I am facing issues with concatenating the mongodb attributes in my code. The desired output that I am aiming for has been ...

javascriptnode.jsmongodbvariablesnosql