Choose only link-based criteria

I'm attempting to create a dropdown menu with links, but I only want to use parameters in the URL, not the entire file name.

Below is the code snippet:

<script type="text/javascript">
    function goToNewPage(){
        var url = document.getElementById('list').value;
        if(url != 'none') {
            window.location = url;
        }
    }
</script>

<select name="list" id="list" accesskey="target">
    <option value='none' selected>Choose an item</option>
    <option value="?one">item1</option>
    <option value="?two">item2</option>
<select>
<input type=button value="Go" onclick="goToNewPage()" />


If I utilize: <option value="index.html?one">item1</option>, it functions correctly. However:

How can I make it work like this:

<option value="?one">item1</option> ?

Answer №1

If you're looking to redirect to a new page based on user input, consider using document.location.search:

function navigateToNewPage() {
    var newUrl = document.getElementById('list').value;
    if(newUrl !== 'none') {
        document.location.search = newUrl;
    }
}

Answer №2

When naming your link file "index.html," the appropriate code to utilize would be:

<script type="text/javascript">
function redirectToPage(){
    var chosenURL = document.getElementById('list').value;
    if(chosenURL != 'none') {
        window.location = "index.html" + chosenURL;
    }
}
</script>

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

Tips for disregarding global CSS in Nuxt.js?

I've been utilizing a boilerplate that integrates with the CoreUI template from GitHub, and it's been working well. However, I am now looking to customize my index page with a unique style, and I'm encountering issues where the global CSS fr ...

Attempting to route a selector, yet on the second attempt, the entity is successfully transferred

I am currently working on developing a function that will switch the image every half second for 10 iterations. During the final iteration, the image src will be set to the actual value. Everything seems to work fine for the first loop, however, when the s ...

“Unable to update value using Controller component in react-hook-form”

Currently, I am utilizing the react-hook-form in combination with MUI components. In order to incorporate the Select component, I have enclosed it within the Controller since direct registration is not possible. Although everything seems to be functioning ...

Dealing with NULL values in a Postgresql database

In the web-survey I created, users are able to select their answers by using radio buttons. To determine which buttons have been selected, I utilize javascript. I have not pre-set any default states for the buttons, allowing users to potentially leave ques ...

Creating a tool that produces numerous dynamic identifiers following a specific format

I am working on a function to create multiple dynamic IDs with a specific pattern. How can I achieve this? followup: Vue.js: How to generate multiple dynamic IDs with a defined pattern Details: I am developing an interactive school test application. Whe ...

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

Interact with HTML Radio Buttons to Trigger Input Opening

I need to have a message saying "We're sorry..." and a "black box" displayed only when the radio button is set to YES, otherwise keep it hidden. Can I achieve this using JavaScript only, or is there a way to do it with HTML alone? <h3 >Did you ...

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

Tips for Creating an Upward-Dropping Dropdown Menu in HTML/JavaScript When Space is Limited on the Page

Hello, I am currently seeking a solution to adjust my dropdown menu so that it appears above instead of below when the page doesn't have enough space to display it fully. My tools for this project include HTML, Javascript, CSS, and JQuery exclusively. ...

Clicking on the current component should trigger the removal of CSS classes on its sibling components in React/JSX

Currently, I am working on creating a navigation bar using React. This navigation bar consists of multiple navigation items. The requirement is that when a user clicks on a particular navigation item, the class 'active' should be applied to that ...

managing nested JSON arrays in JavaScript

I have a straightforward task with handling a simple array that is divided into two parts: a group of vid_ids and a single element named page. Initially, I was iterating through the vid_id array using a for loop. However, upon adding the page element, I en ...

Tips for transforming a table column into an input field to retrieve the value and id of the field?

I have a set of data stored in the table provided below. My goal is to convert the table cell into an <input/> field once it is clicked. Following that, I want to send both the value and the id of the <input/> via an ajax request. Is this achie ...

Screenshots of playwright failing to work on Github.''

Within my playwright.config.ts file, I have specified the following: use: { ... screenshot: 'only-on-failure', } When running tests locally and they fail, screenshots are successfully saved in /test-results. However, the issue arises when th ...

"Integrating JavaScript in C# Code Behind: A Step-by-Step Guide

Is there a way to trigger this javascript function using C# code in the backend when the page loads? Your assistance is greatly appreciated, thank you. <script type="text/javascript"> document.onkeydown = function (event) { event = ( ...

JavaScript - Implementing dependency injection with promises

I am facing a challenge in passing an object around in JavaScript, with some jQuery involved. :) My goal is to execute the FlappyBarHelper.getUserPropertyCount() method once the promise.success function has completed. I attempted to pass this.FlappyBarHel ...

Why is it important to incorporate an inner function in order to return to the outer function?

Can you explain the distinction between these two functions, bind_1 and bind_2? function bind_1(f, o) { if (f.bind) return f.bind(o); else return function() { return f.apply(o. arguments); }; } function bind_2(f, o) { if (f. ...

Saving Information Using Express-Session

Imagine you need a user to input their email and then save it to be accessible across multiple web pages. Would it be considered a poor practice to store this email in the session object of express-session? For example: req.session.email = '<user ...

Node.js is being utilized to upload data to an FTP server with the help of js

I'm attempting to send a file to an FTP server using Node.js with the help of jsftp module.exports = async function() { const jsftp = require("jsftp"); console.log(__dirname) const ftp = new jsftp({ host: "host.name", ...

Discover the steps to incorporate an external JS file into Next.js 12

I am encountering an issue in my Next.js project when trying to import a local JS file. Here is the code snippet I am using: <Script type="text/javascript" src="/js.js"></Script> Unfortunately, this approach results in the ...

What is the reason that I have to submit my mapped function twice in order for the updated state to show after modifying the array content?

When I try to display an image for the current value in the array item, the image does not display when I submit my value. I have to submit twice to display the value. Additionally, when changing the value and pressing submit, the content in the div does ...