Reveal hidden elements once the form has been submitted

At this moment, the info, stat and foo elements are hidden. Strangely, when I submit the form, they don't become visible. However, if I incorporate the unhide() function within the 

<button onclick="unhide()"></button>
, it works perfectly fine. But for some reason, it fails to work inside the form.

Is there a way for the unhide() function to reveal these elements after form submission?

<style>
                    #info {
                        visibility: hidden;
                    }
                    #stat {
                        visibility: hidden;
                    }
                    #foo {
                        visibility: hidden;
                    }
            </style>
            
            <script>
            
                    function unhide() {
                    var x = document.getElementById("info");
                    var y = document.getElementById("stat");
                    var z = document.getElementById("foo");
                    
                        if (x.style.visibility === "hidden" && x.style.visibility === "hidden" && x.style.visibility === "hidden") {
                            x.style.visibility = "visible";
                            y.style.visibility = "visible";
                            z.style.visibility = "visible";
                        } 
                        else{
                            x.style.visibility = "hidden";
                            y.style.visibility = "hidden";
                            z.style.visibility = "hidden";
                        }
                    }
        
             </script>
           
            
                <form method="GET" onsubmit="unhide()" action="../index.js" class="justify-center flex p-6">
                    <input class="mt-4 text-lg p-3 text-white rounded-l-md border-white border-2 bg-gray-900  outline-none" type="text" name="search" placeholder="Enter country">
                    <input class="mt-4 py-3 px-6 font-bold rounded-r-md text-lg cursor-pointer" value="search" id="submit" type="submit">
                    
                </form>
javascripthtmlcssnode.js

Answer №1

After submitting a form, the usual action is to send the data to the specified URL in the action attribute, causing a page refresh.

As a result, any hidden elements may briefly appear before disappearing again due to the fast page reload process.

To avoid this default behavior, add an event parameter to the onsubmit event handler and include event.preventDefault() at the beginning of your code snippet.

This adjustment will allow you to submit the form without triggering a page refresh, keeping your hidden elements visible consistently.

You can refer to the example below:

function unhide(event) {
  event.preventDefault();
  var x = document.getElementById("info");
  var y = document.getElementById("stat");
  var z = document.getElementById("foo");

  if (x.style.visibility === "hidden" && y.style.visibility === "hidden" && z.style.visibility === "hidden") {
    x.style.visibility = "visible";
    y.style.visibility = "visible";
    z.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
    y.style.visibility = "hidden";
    z.style.visibility = "hidden";
  }
}
#info {
  visibility: hidden;
}

#stat {
  visibility: hidden;
}

#foo {
  visibility: hidden;
}
<form method="GET" onsubmit="unhide(event)" action="/" class="justify-center flex p-6">
  <input class="mt-4 text-lg p-3 text-white rounded-l-md border-white border-2 bg-gray-900  outline-none" type="text" name="search" placeholder="Enter country">
  <input class="mt-4 py-3 px-6 font-bold rounded-r-md text-lg cursor-pointer" value="search" id="submit" type="submit">
</form>

<div id="info"> This is some info </div>
<div id="stat"> Stat </div>
<div id="foo"> Some random information </div>

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

Text Overlapping Issue in React Material UI Components

I am currently working on a React application using Material UI and facing an issue while implementing an entity update page. The task at hand is to display the existing values of the entity for the user to update. To achieve this, I have set the default v ...

javascriptreactjsmaterial-ui

Utilize the ng2-select component to incorporate multiple instances within a single webpage

Can someone help me figure out how to use two ng2-select components in my modal? I've checked out the documentation, but it doesn't provide any information on using more than one select. I'm not sure how to capture the selected values of ea ...

javascriptangulartypescriptcomponents

Angular 2 ngIf displaying briefly before disappearing

Encountering a strange issue with an Angular 2 ngIf statement where it appears on the page for a brief moment and then disappears. The content is visible, but it doesn't remain on the page. I suspect it might be related to some asynchronous behavior. ...

htmlangular

Generating hyperlink regions dynamically

I am looking to create an image with a link map that will contain multiple areas that need to be updated frequently. Instead of constantly recreating the areas every few seconds, I want to generate them only when the user clicks on the image. I initially ...

javascriptjqueryjquery-eventsimagemap

What is the best way to perform a redirect in a Node.js Express application using varying request bodies

Hello, I’m currently working on a website and wanted to share some of my code with you: Here’s a snippet from app.ts import * as express from 'express'; import knex from './init/knex'; // Router import indexRouter from './ro ...

node.jsexpressrequest

Unexpected behavior with async pipe - variable becomes undefined upon reassignment

In my development process, I have implemented 2 components. One is responsible for fetching data from an external service, while the other one displays this data. The constructor of the first component is structured as follows: constructor( private dev ...

javascripthtmlangular

Tips for eliminating the entire link from the footer section

Whenever a link is hovered over, a white box displaying the full URL appears at the bottom left of the browser. Is there a way to remove this feature from my website? I appreciate any assistance with this issue. Thank you! ...

htmlcssbrowserhyperlink

Generating examples of two models that are interdependent

In my Javascript form, I have implemented an AJAX POST request that successfully creates a new instance of a model called Component. Now, my goal is to allow users to input keywords for the Component model through the same form. To achieve this, I have al ...

javascriptjqueryruby-on-railsajax

Personalize the way UIkit tooltips appear

I've been working on customizing a uikit tooltip for my checkbox. I managed to change the font and background color, but for some reason, I can't adjust the font size. I even tried adding a custom class without success. Do you think it's pos ...

cssuikit

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Consider this scenario <div class="col-md-my"> </div> .xx { color: black; } .yy { color: red; } Similar to how Bootstrap adjusts width at different breakpoints. Create a new class called col-md-my When the width exceeds the ...

htmlcssbootstrap-5

"How to ensure a background image fits perfectly on the screen in IE10

I am facing a problem while trying to set the background image in CSS to fit the screen. It works fine with the latest version of Chrome, but there is an issue with IE 10. html { border-top: 10px solid #8A85A5; background: url("http://www.lifeintempe.com/ ...

cssasp.netinternet-explorer-10

change the css back to its original state when a key is pressed

Is there a way to retrieve the original CSS of an element that changes on hover without rewriting it all? Below is my code: $(document).keydown(function(e) { if (e.keyCode == 27) { $(NBSmegamenu).css('display', 'none');} ...

javascriptjquerycssonkeydown

Retrieve database SQL information using JavaScript to display data

I'm struggling to push the value from a textbox to SQL and display it. Despite reading numerous topics, I still can't figure it out. My explanation skills are lacking, but hopefully you can understand what I'm trying to achieve, especially i ...

javascriptphpajaxmysqli

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

javascriptjqueryhtmlangularjs

There seems to be an issue with a potentially null object in an Angular project while trying to view a PDF file

IDENTIFY THE ERROR: printContents = document.getElementById('print').innerHTML.toString(); ON LINE 4: print(): void { let printContents!: string; let popupWin!: any; printContents = document.getElementById('print').innerHTM ...

javascriptangulartypescriptangular11

What is the best way to convert this jQuery code into an AngularJS implementation?

I'm diving into the world of AngularJS and looking for a more elegant solution using AngularJS principles Controller $scope.filter = function($event, active, id) { var html = ""; if(active){ $http({method: 'GET& ...

javascriptjqueryajaxangularjscheckbox

Using Nodemon and Express Server with BrowserSync

Struggling to get Browser Sync and Nodemon to play nice with my Express server. I've experimented with all sorts of setups but can't seem to get it right. The Express server is running on port 5000 just fine, nodemon kicks in when there are chan ...

node.jsexpressbrowser-syncnodemon

How can VueX be leveraged to add an item to an array and also delete an item from the same array?

https://stackblitz.com/edit/vue-script-setup-with-vuex-gfjaff?file=src/components/UserProfile.vue I'm currently working on a feature where I can input a name into a dispatch function and have it added to an array. Eventually, I plan to include a text ...

javascriptarraysvue.jsvuex

Tips on resolving JavaScript's failure to adjust to the latest HTML inputs

I'm working on a homepage where users can choose their preferred search engine. The issue I'm facing is that even if they switch between search engines, the result remains the same. I've experimented with if-then statements, but the selecti ...

javascripthtml

Using Angular to sort arrays based on the values in a separate array

I have a unique setup where there is a table containing select options in each row. The value of the select option changes based on the 'dataType' specified for that particular row. Here is an example of my Table Array: { 'name':' ...

javascriptangular