After pressing the enter key, my page fails to update

I've been developing a website, but I'm facing an issue where pressing enter on the login page (index.html) doesn't redirect to the home page (home.html) after verifying the password. However, clicking the button on the page itself works as expected. Any suggestions on how to fix this?

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/popup.css?Version=1.1">
    </head>
    <body>
        <div id="box">
            <form id="myform-search" method="post" autocomplete="off">
            <h1>Enter Password</h1>
              <p>
                <input type="password" value="" placeholder="Enter Password" id="p" class="password">
                <button class="unmask" type="button" onclick="toggle()"></button>
                <button class="enter" type="button" onclick="done()">Enter</button>
              </p>
            </form>

          </div>
          <div id="wrong">
            <p>Sorry, but the password you entered is incorrect!</p>
        </div>

            <!--Javascript to show password Box-->
            <script>

                //Verifies password
                function done() { 
                    document.getElementById("box").style.display = "none";
                    var password = document.getElementById("p").value;
                    if (password == "12345") {
                        location.replace("http://apr.great-site.net/Home/home.html");
                    } else {
                        document.getElementById("wrong").style.display = "block";
                    }
                };

                function toggle() {
                    var x = document.getElementById("p");
                    if (x.type === "password") {
                        x.type = "text";
                    } else {
                        x.type = "password";
                    }
                }

            </script>
    </body>
</html>

Answer №1

 // Verifying password
 function checkPassword() { 
    document.getElementById("box").style.display = "none";
    var password = document.getElementById("p").value;
    if (password == "12345") {
       // returning true will submit the form
       return true;
    } else {
        document.getElementById("wrong").style.display = "block";
        // returning false will prevent submiting the form
        return false;
    }
};
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/popup.css?Version=1.1">
    </head>
    <body>
    
        <div id="box">
            <form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return checkPassword();">
            <h1>Enter Password</h1>
              <p>
                <input type="password" value="" placeholder="Enter Password" id="p" class="password">
                <!-- Commented this button as it is not needed in the context of the solution -->
                <!--<button class="unmask" type="button" onclick="toggle()">something</button>-->

                <!-- HERE is the interesting part : -->

                <!-- Clicking the "Enter" button has same effect as -->
                <!-- hitting the default submit button or pressing the Enter button on your -->
                <!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
                <!-- preferably in the password input field -->
                <button class="enter" type="button" onclick="checkPassword()">Enter</button>
                <input type="submit" value="Real Submit" />
              </p>
            </form>
          </div>
          
          <div id="wrong" style="display: none;">
            <p>Sorry, but the password you entered is incorrect!</p>
        </div>
    
    </body>
</html>

Feel free to use this code snippet for your needs. It can help clarify some basic concepts for you :-)

Answer №2

Give this a shot:

<form onSubmit="complete()">
              <p>
                <input type="password" value="" placeholder="Type Password Here" id="p" class="input-password">
                <button class="reveal" type="button" onclick="toggleVisibility()"></button>
                <button type="submit" class="submit-btn">Submit</button>
              </p>
            </form>

Answer №3

To ensure that the function done() is executed when the enter key is pressed, you need to set up an event listener for the Enter key on your form. Just remember, you have opened 2 form tags.

document.getElementById('myform-search').addEventListener('keyup', function(event) {
    if(event.key=='Enter') {
        done()
    }
}

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 is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

I am looking to conceal an element as soon as a list item is scrolled into view and becomes active

Is it possible to hide a specific element when the contact section is activated on scroll, and have it visible otherwise? How can this be achieved using Jquery? <ul class="nav navbar-nav navbar-right navmenu"> <li data-menuanchor="ho ...

Removing empty commas from a string with JQuery

I am looking to utilize JQuery to eliminate any empty commas from a given string. Take a look at the provided images for further clarity. ...

Ways to stop a page from refreshing when encountering an error?

I am currently working on a code that is designed to extract user input from a form. I have successfully implemented a JavaScript code to verify whether the fields in the form are filled or not. Everything is functioning correctly, except for one recurring ...

Clicking on Google Code Prettify does not trigger syntax highlighting

I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

Generate the new foreign key value in Django (dropdown menu) prior to saving

As a beginner in using Django, I am currently working on developing a simple accounting application. However, I am encountering an issue that I need assistance with: In my project, I have created 3 models - 'accounts', 'journal', and & ...

Adding a component to a grid row with a click action

I have a grid of items and I want to display another component that takes up the full width below the clicked item when it's selected. Here is an illustration of what I'm trying to accomplish: https://i.sstatic.net/5XIvf.png Within my button-li ...

Center a heading div vertically using Bootstrap in a responsive way

I am attempting to vertically center the h5 element within a div in a responsive manner, eliminating the use of fixed pixel heights. The h5 element, identified by its id as "channelName", is the element in question. <div class="col-10 text-left channel ...

Send information from a dropdown selection to mysql database without needing to reload the page

Looking for a way to submit data from a dropdown menu to a PHP script without refreshing the page? Currently, when a user selects an option from the dropdown menu, the form action directs it to a PHP script that updates the database query. Below is the cod ...

Is there a way to adjust the font size of a select option?

Looking to customize the appearance of a select option dropdown list. Wondering if it's possible to change the font sizes of individual options rather than keeping them all the same? For instance, having the default: -- Select Country -- displayed a ...

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

My local WAMP server hosts a web application with self-signed SSL enabled, resulting in the following app URL: https://myipaddress:port/demoapp/index.html However, when I send this URL via WeChat chat and click on it, only a blank page is displayed. Stra ...

What is the best way to define a variable that captures and logs the values from multiple input variables?

Hey there, I'm a new coder working on a shopping list app. I'm trying to display the input from three fields - "item", "store", and "date" - at the bottom of the page as a single line item. I attempted to do this by creating a variable called "t ...

A beginner's guide to implementing the GET method with Express.js

Hey there, I have a folder named "vehicles" on my PC and I'm looking to set up a localhost to generate links for each image in that folder. For example: localhost:800/vehicle/ So when I click on the link, it should display the image. However, bein ...

Refresh the iframe content by clicking a button in Angular2, without having to reload

Is there a way for the search data to be reloaded when the popup is closed without having to refresh the entire page using window.location.reload()? My app will be embedded as an iframe in the main web app, so I want only the data to be reloaded upon butto ...

Show a div depending on a certain condition, such as whether there are children present in a ul

Can you please review the code snippet below? I am trying to make it so that the #non-alphabet element is displayed only if there are no child elements (brand-options) within .refinement-options. How can this be achieved? *For further clarification, refer ...

Arrange elements with Material-UI's Grid system

Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes. For screens sized lg and above, I want the components t ...

Adjust the brightness of a specified oklch color by 50% using CSS oklch(from ...) in combination with the calc() function

We have implemented a design system that includes various CSS custom properties for colors. For example: :root { --color--blue-1: oklch(88.6% 0.023 238); } Our latest addition is the utilization of the oklch color format. Currently, I am tasked with ca ...

Angular TS class with an ever-evolving and adaptable style

Currently, I am working with angular 9. Does anyone know a way to dynamically change the CSS of a class in a component? .stick-menu{ transform: translate(10px,20px); } I am looking to dynamically adjust the position of x and y values. For example: .stic ...

A comprehensive guide to navigating pages using AngularJS

Greetings! I've recently embarked on my Angular JS learning journey and have encountered an issue with loading content from pages. Unfortunately, I am not able to receive any content. Below are snippets of my index file and corresponding JavaScript co ...