Pressing the Enter key does not initiate a redirect on the page

Hey there! I've set up a text field where users need to input a password in order to download a PDF file. If the password is correct, they are directed to the URL of the PDF file. However, if the password is wrong, they are redirected to a page called "incorrect" (incorrect.html).

Everything seems to be working smoothly, except for one issue. When users press the Enter key, the page doesn't redirect; it only works when they click on the Submit button.

Is there a way to resolve this problem?

Thank you in advance!

Text Field and Submit Button Code

<form name="login">
<input class="gen-label" type="text" name="pass" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;">
<input class="button submit" type="button" value="Submit"  onClick="TheLogin(this.form)">
</form>

Javascript Code

<script>
function TheLogin() {
var password = 'Pass1';
if (this.document.login.pass.value == password) {
  top.location.href="file_to_download.pdf";
}
else {
  location.href="incorrect.html";
  }
}
</script>

Answer №1

<input type="submit" Initiates form submission when the Enter key is pressed, while a button won't trigger it.

Another important point is to update the else code as shown below for proper redirection.

<input class="gen-label" type="text" name="password" size="17" onKeyDown="if(event.keyCode==13) event.keyCode=9;">
<input class="button submit" type="submit" value="Submit"  onClick="authenticate(this.form)">
</form><script>
function authenticate() {
var userPassword = 'Secret123';
if (this.document.login.password.value == userPassword) {
  top.location.href="file_to_download.pdf";
}
else {
  window.location="error.html";
  }
}

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

Adjusting the view of an OpenLayers3 map to encompass various vector layers

My OpenLayers3 map includes an OSM Tile layer and one or more Vector layers. I have a function that allows me to zoom into a single layer successfully: vector.addEventListener("change", function() { map.getView().fitExtent(vectorSource.getExtent(), ma ...

Limiting client requests on the Azure Translation API

I have a client who needs to limit the number of requests made to my Azure Translation API service. I found information from Microsoft on how to implement request throttling, but it's unclear where exactly in the request this throttling data should be ...

Assurance of retrieving information

I am looking to extract specific information from the following website . I have implemented Promises in order to retrieve data about planets, then films associated with a particular planet object. My next goal is to access data within the species array ne ...

Is there a way to retrieve the HTML raw code using backticks for string interpolation in JavaScript?

I am working on a resume builder project where the HTML template file is stored in Firebase storage and retrieved using a URL. The template has been modified to include string interpolation, such as <h1>${name}</h1>. However, when I fetch the d ...

Is there a way to switch the cursor to a pointer when hovering over a bar on a ChartJS bar graph?

Here's the chart I created: createChart = function (name, contributions, idArray) { globalIdArray = idArray; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data: { lab ...

Failed to retrieve values from array following the addition of a new element

Does anyone have a solution for this problem? I recently added an element to my array using the push function, but when I tried to access the element at position 3, it wasn't defined properly processInput(inputValue: any): void { this.numOfIma ...

Is there a way to access the history of Vue routers?

I am looking for a way to determine if the Vue router has additional entries in its history that can be navigated back to. This information is crucial for deciding whether or not to execute the exit app function. The app should only navigate back to prev ...

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

Utilizing jQuery to efficiently chunk JSON data through AJAX calls

Is there a way to efficiently handle the retrieval of large amounts of JSON data through an ajax request? I am looking for a jQuery or JavaScript function that can assist with "chunking" the data. For example, I would like the ability to continuously rece ...

There was an issue with the NextJS axios request as it returned a status code

I'm currently in the process of developing an application with NextJS and Strapi In my project, I am fetching data from Strapi using Axios within NextJS Next: 14.0.4 Axios: ^1.6.5 Strapi: 4.17.1 Node: 18.17.0 Here is the code snippet: import axios f ...

How can I optimize the performance of JS-heavy pages on mobile devices?

As a website owner, I strive to optimize the performance of my site on mobile devices without the need for a separate "mobile-friendly" version or replacing large sections of code. With around 100K of JS code, including jQuery, I am determined to enhance b ...

Having issues with transferring user input on change to a parent component in React JavaScript

I encountered an issue while passing a method from a parent component to a child component. The parent component, FilterableProductTable, contains a state called filterText. It renders a child component named SearchBar and passes down a function called han ...

Working with Javascript objects and arrays

Need assistance with manipulating/updating a JavaScript array. Hoping for some help. The initial array looks like this: array('saved_designs'=array()); In Javascript JSON format: {"saved_design":{}} I plan on adding a label and its associa ...

Looking to divide a multiple-page .TIFF document into several PNG or JPG files using the sharp module in node.js?

Is there a way to split a single .tiff file with multiple pages into several .png or .jpg files without using ImageMagick or GraphicsMagick due to limitations in my codebase? I am unable to install CLI tools so I'm exploring alternate solutions. I kn ...

Incorporate 3 additional compound filters with shuffle.js

Is there a way to add a third compound filter to the existing shuffle.js code provided below? // ES7 will have Array.prototype.includes. function arrayIncludes(array, value) { return array.indexOf(value) !== -1; } // Convert an array-like object to a r ...

What steps can I take to eliminate the warning "Warning: Prop `style` did not match" that appears when I bring in the Image component in Next.js?

Hi there! I'm encountering a warning when trying to import an image using the Image component in nextjs. The warning message reads: Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; ba ...

choose multiple elements from an array simultaneously

Looking for help with a basic Array question and seeking the most effective solution. The scenario involves having an array: var pathArr = [element1, element2, element3, element4, element5, element6] If I want to select multiple elements from this array ...

An error occurred while trying to access properties of null during a promise, specifically when trying to read the 'parentNode' property - triggered by calling router.push({})

After updating my dependencies, I encountered an issue every time I clicked on a button to navigate to the next page. The error message Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode') would appear, even thou ...

What action is triggered on an Apple iPhone when a notification is tapped?

Currently, I am working on a React application and testing it on an Apple mobile phone. One issue I encountered is that when I receive an SMS, the number appears as a suggestion above the keyboard. I want to be able to tap on this number and have it automa ...

The dimensions of the sprites within Three.js geometry

I am interested in creating an animation of sprites moving along a figure, particularly sprites that walk along the figure. An example of what I envision can be seen here: http://armsglobe.chromeexperiments.com/ I found some helpful information related t ...