Is it possible to redirect the client to a different HTML file after they input a number?

Following a submission of numerical input, I am looking to navigate from the index.html file to another HTML file or similar destination.

Could someone provide assistance?

Below is the code I have written:

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="nick.jpg">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Bet</h1>

  <form action="cool.html">
    <label class="amountMoney" for="amountMoney">Enter the desired amount of money. The sum will be converted into dollars.</label>
    <h3>The value must not exceed 100 or go below 10</h3>
    <input id="amountMoney" type="number" placeholder="Amount of money" min="10" max="100" required>
    <button type="submit">Submit</button>
  </form>
  <script src="script.js" defer></script>
</body>
</html>

By the way, I am referencing a different CSS file in cool.html

Answer №1

When working with pure html (without any scripting language), the recommended approach is to specify the method and action parameters at the beginning of your form:

<form method="post" action="cool.html">

Alternatively, you have the option to redirect to a different page once the form has been processed on the server side, depending on your specific situation.

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

PHP is not processing the HTML form I submitted

HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...

iPhone experiencing no response to HTTPS AJAX request

$(function () { var apiEndpoint = "https://www.myaddress.com/api/"; var getVersion = $.ajax({ url: apiEndpoint + "version/", dataType: "JSON", username: "myuser", type: "GET", password: "mypass" }); ...

Tips for refreshing the current page with passing a parameter in the URL?

To achieve the functionality of reloading the page whenever different buttons are pressed and sending a String to the same page, I need to take that String on created() and use it to send an HTTP Get into my Database. My current setup looks like this: exp ...

javascript exchange the content when clicking on a hyperlink

I'm encountering a bit of a challenge with this task... My javascript skills are a bit rusty, and I can't seem to pinpoint what's going wrong. My goal is to have a navbar that disappears when a user clicks on a small arrow, revealing a seco ...

Combining click and change events in JQuery

Is it possible to listen for both click and change events in one code block? $(document).on("click", "button.options_buy",function(event) { // code for click event } $(document).on("change", "select.options_buy",function(event) { // code for chan ...

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

Guide to creating individual column templates in Kendo-UI grid

I recently started using Kendo-UI in my project and wanted to have a column in my grid display an image button along with a field, similar to the 'Contact Name' column in the documentation here. After exploring the documentation, I came across th ...

What is the best way to refresh data in a React component so that it displays the recently added data?

My website features a todo list that functions like this: Todo list Upon clicking the plus button, an input field appears allowing users to add items. Although the item is successfully added to the database, it does not immediately reflect on the webpage ...

The setStyle() method in JavaFX is like CSS Selectors

Is it possible to bind CSS files to style JavaFX components and also change properties dynamically in code? I'm struggling with the setStyle() method as there's limited documentation available on how to use it effectively. Instead of modifying t ...

The use of JQuery's .show() and .hide() functions may disrupt the functionality of CSS hover

When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CS ...

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

I am in need of setting networks in my contract using NodeJS and TypeScript. Below is the code I have written: let networkId: any = await global.web3.eth.net.getId(); let tetherData = await Tether.networks[networkId]; Unfortunately, I encountered ...

Learn the process of updating database information with AngularJS through a button click

As a newcomer to Angular, I am facing an issue in my mini project. The main goal of the project is to display data from a database. I have successfully set up the view to show current data by making API calls and connecting to the database. However, I am n ...

flexible reaction mechanism for Uploadify

Welcome I am working on a project that involves utilizing two forms within tabs in Ext-JS. Additionally, I am implementing the jQuery framework for my main JavaScript programming tasks. Lastly, I have a global JavaScript object instance (singleton) named ...

Can you use an ajax post to search for a boolean in MongoDB without converting on the server side?

I am facing an issue with my mongo collection that has documents containing a boolean field: { name : "Tom", active : true } { name : "Jerry", active : false } In my application's client side, there is an element that triggers an AJAX po ...

Unable to retrieve multiple values from a sinon stub

I am trying to stub a method using sinon in my Typescript code with Bluebird promises. However, I'm running into an issue where only the first value I set for the stub is being returned, even though I want it to return a different value on the second ...

Encountering a connection error while running a Node.js Selenium test case on Chrome. The specific error message received is: "Error: ECONNREFUSED - Connection refused to 127.0

When attempting to run a test case on a Selenium Node.js server, an error was encountered: Error: ECONNREFUSED connect ECONNREFUSED. The test case script is as follows: var assert = require('assert'), test = require('selenium-webdriver ...

Error encountered when uploading files using Multer (Node.js and React)

I've just submitted a request from the client, and it seems to be causing some issues. Here's the code snippet that is giving me trouble: if(file){ const data = new FormData() const fileName = Date.now() + file.name data.append( ...

Picking a variety of elements and determining their heights using the height

I'm curious why this jQuery code isn't working as expected: hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height(); My intention is to retrieve the heights of multiple elements and store them in a variable. I assumed that ...

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

Error occurred within node while attempting to create a directory using mkdirsync

I wrote some code. try{ var Storage = multer.diskStorage({ destination: function (req, file, callback) { fs.mkdirSync('/home/data/' + file.originalname, { recursive: true }, (error) => { ...