Input field maintaining original value

For further information, please visit this link

To complete this task, start by clicking on the pink-colored div. A black-colored div will then appear containing three text boxes. The first textbox will already have the value 'a'. Next, enter values into the second and third text boxes before moving away from the div. If you click on the pink div again, the black div will reappear with all three text boxes filled with your previous input. Is there a way to prevent the second and third text boxes from retaining the entered values upon reopening? Ideally, they should revert back to their original empty state without needing to reload the page.


$(document).ready(function () {
$("#xxx").click(function () {

    $("#aaa").show();
    $('#a').focus();

   });  
var timer;
$("#aaa input").blur(function () {

    timer = setTimeout(function () {

        $("#aaa").hide()
    }, 50);
}).focus(function(){
    clearTimeout(timer)
});
});

Answer №1

Make sure to include the code snippet $("#aaa input:not(#a)").val(''); in your existing code for the click event:

Check out this demo on JSFiddle

$(document).ready(function () {

    $("#button").click(function () {
        $("#input-container input:not(#special-input)").val('');
        $("#input-container").show();
        $('#special-input').focus();    
    });

    var timeout;
    $("#input-container input").blur(function () {

        timeout = setTimeout(function () {
            $("#input-container").hide()
        }, 50);

    }).focus(function () {
        clearTimeout(timeout)
    });
});

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

faulty lineup in jquery picture switching feature

I've been working on a website that features a jumbotron with images that transition. I've searched online for solutions, but have come up empty. I know the answer is probably simple, but I just can't seem to figure it out right now. The is ...

Randomizing jQuery for duplicated HTML/jQuery elements

I'm facing a challenge with my jQuery and HTML scripts. I have a dropdown menu where a randomly generated number is displayed in the supplies field (voorraad) based on the selected option. However, when I clone this field using the add button, the fun ...

Resize all SVGs to a uniform height and align them in a single row within a flexbox container

My goal is to design a banner featuring various accepted payment icons. I aim to resize the images so that they all have the same height, which is the maximum height possible to fit all images in a single row. The images vary in size and aspect ratio, incl ...

Is there a foolproof method to invoke the jquery ajax function prior to a window being unloaded?

My current task involves triggering the jquery ajax() function before a window is unloaded. Specifically, I need to perform a POST request without needing to retrieve the response; all I want is for the database to be updated. It appears that the solution ...

Radio buttons failing to submit

$(".dist_radio").click(function(event) { event.preventDefault(); $(".dist_radio").removeClass('dist_on'); $(".dist_radio").children('input').attr('checked', false); $(this).addClass('dist_o ...

Creating a specific order for Arabic strings in HTML is simple and can be done by utilizing

I need to adjust the ordering of a datetime written in Arabic numbers. I must use an Arabic string and currently have the following C# code written in Arabic: std.InnerText = "17-02-2016"; The current output is in Arabic numerals, displayed as ٢٠١٦- ...

Header Customization and Post Layout on Tumblr

In my recent purchase, I acquired the Margaret Studio theme from themecloset on Tumblr. Upon adding my own logo, it unexpectedly resulted in the first image on my blog being cut off with a white strip that seems to be the 'background' of my logo ...

Ensure that any relevant information is placed adjacent to a floated image

I am currently designing a responsive webpage featuring images of people's faces placed next to descriptive text. At smaller screen widths, everything looks perfect. However, as the page widens, the text for one person starts next to the image of the ...

jQuery: How can I add ajax content dynamically? Trigger?

Currently, I am developing the frontend of a web application that heavily relies on AJAX functionality, such as loading comments. All AJAX requests are being handled through jQuery functions. I am curious if there is a way for me to detect these insertion ...

JS/PHP: No error message will be alerted

<script type="text/javascript"> $(function() { $("#continue").click(function () { $.ajax({ type: "POST", url: "dbc.php?check=First", data: {full_name : $('#full_name').val(), usr_email : $('#usr_ema ...

Steps for inserting levels into nested objects:

I am working on dynamically adding levels to a nested object structure. Here is an example: [{ "_id": "5a8855df9a8bb60e749c9d87", "name": "Test3", "children": [] }, { "_id": "5a8856569a8bb60e749c9d88", "name": "Test4", "childre ...

Using the MUI library, implement a ternary operator to handle the PaddingLeft property

One of the challenges I am facing in my application is to dynamically change the paddingLeft of the container based on whether the side nav menu is selected open or closed. I have a variable called open that indicates the current state of the side nav. ...

Animate items in a list by staggering their appearance during the initial rendering

I am currently working on creating a navigation menu that has a staggered effect when the list items appear upon opening the menu. Using a burger symbol to toggle the navigation menu to fullscreen, I want to incorporate an animation where each list item ( ...

Adjusting dimensions using CSS

I am facing an issue where my tab names are displaying too large and I would like them to be default size. I have placed the following script in the <head>. <style type="text/css"> { font-family: Verdana; font-size:40%; } ...

Navigate to the specific tab content by clicking on the menu tab for individual WooCommerce products

I have integrated jQuery code into a PHP function to enable scrolling to tab content when a menu tab item is clicked on WooCommerce single products. The product tabs are arranged in a vertical layout. The script is designed to automatically scroll the user ...

Displaying a pop-up message using JavaScript: How to trigger it with jQuery

Within my application, I have successfully implemented a basic JavaScript popup by invoking it in this manner- <a href="javascript:popup('Hello World')>Click Me</a> I am curious if it is feasible to trigger the same popup using othe ...

Why does my JavaScript code only function properly on the initial div element?

I want to create a JavaScript function that changes the color of the title when I hover over an image. It seems to be working, but only for the first div. Could it be an issue with my scoping? Thank you! <body> <div> <a href="" i ...

Connect information to a drop-down menu using AngularJS

For some reason, I am facing an issue when attempting to bind data to a form using AngularJS. I have utilized ajax to retrieve book information and all categories from the database, assigning them to the variable $scope in the controller. While some fields ...

Obtaining the anchor from the list item that shares the same ID as the cell

In the following HTML code for TD, it is appended after matching the IDs from the LI HTML code below. <td style="border-top-style: solid; border-right-style: solid; border-left-style: solid; border-bottom-style: solid" id="Communication"> Co ...

How to alternate the display of a single li element in React?

I am looking to swap the colors of the active element in my project. Currently, both elements change style when clicked. How can I resolve this? Thanks! function Language() { const [isStyled, setIsStyled] = useState(false); const toggleStyle = ...