My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection.
For example, I have the following 3 options:
If a user selects option 1 and submits the form, they will be directed to the Facebook page. If they choose option 2, they will be directed to the YouTube page, and so on.
If you're looking for a simple solution, all you need to do is extract the value from the selector and then employ JavaScript to open the corresponding link.
Feel free to check out my solution on JS Fiddle for guidance -
function goToLink() {
let selectedLink = document.getElementById("selector").value;
let fbLink = "https://facebook.com";
let twLink = "https://twitter.com";
if(selectedLink === 'fb') {
window.open(fbLink);
} else if (selectedLink === 'tw') {
window.open(twLink);
}
}<select id="selector">
<option value="fb">Facebook</option>
<option value="tw">Twitter</option>
</select>
<button onclick="goToLink()">
Go to website
</button>This example may not function properly within this context, but it works flawlessly on JS Fiddle.
<body>
<form>
<select name="" id="target">
<option value="facebook">Facebook</option>
<option value="youtube">Youtube</option>
<option value="twitter">Twitter</option>
</select>
<button type="button" id="sub_button">submit</button>
</form>
<script>
const links = {
facebook: 'https://facebook.com',
youtube: 'https://youtube.com',
twitter: 'https://twitter.com',
}
document.querySelector('#sub_button').onclick = function() {
let chosenLink = document.querySelector('#target').value;
window.location.href = links[chosenLink];
}
</script>
</body>
/module/c.js, attempting to export name and age. export const name = 'string1'; export const age = 43; In b.ts, I'm trying to import the variables name and age from this .ts file import { name, age } from "./module/c"; console.log(name, ...
In my JavaScript and HTML5 course, I am working on developing a website where users can choose the background color and decide between using SANS SERIF or SANS fonts. The background color selection feature is already functioning successfully -- var inputC ...
Is there a method to dynamically load JS files before "$(document).ready" is triggered, while still having them available in the ready event handler? Is there a feature in jQuery that allows for this process? The challenge I am facing involves loading di ...
Hello, I am struggling to place my navbar on top of an image using bootstrap 4. I have set the CSS properties for both elements, but it doesn't seem to be working. Here is the code I am using: <header> <nav class="navbar navbar-toggl ...
Currently, I am working on building a sorting list using AngularJS. The goal is to have the data updated in the DOM dynamically when a user clicks on the name of a value. I am attempting to order the values by categories such as Bracelets, Charms, Earrings ...
So, I'm facing a challenge here. I have a basic jQuery Ajax request that isn't working when I set the DataType to "JSON". var form_data = { "id": msg, "token": token }; $.ajax({ type: 'POST', url: "ajax.php", ...
I have been developing a Greasemonkey script to enhance the performance of a vendor's angularJS tool by automating certain processes. One major obstacle I am encountering is that the element I need to interact with is not yet loaded in the DOM when m ...
I am currently working on a jQuery tic-tac-toe project and facing an issue with iterating through the board to save the values of each cell in an array. I have tried using .text() and .value(), but both returned undefined index.html: <html> < ...
Our current setup utilizes the default embedded Chrome PDF viewer to showcase a PDF document with interactive form fields, enabling users to conveniently fill out the form. Once completed, they can click on the download button to save the form with or with ...
For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...
Description of Issue Every time I reset the test server to a known state, my tests fail due to ongoing Ajax requests initiated by DataTables instances. I am seeking a solution to prevent these failures by stopping the DataTables requests before resetting ...
When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...
Within my Angular 2 application, I have created a service called events.service.ts: const EVENTS = { 1512205360: { event: 'foo' }, 1511208360: { event: 'bar' } } @Injectable() export class EventsService { getEvents() ...
How can I make the height of the first div equal to the dynamic height of the second div, when the second div contains a lot of dynamic data with an unpredictable height? <div style="width: 100%;"> <div class=& ...
While constructing a timeline in my vue.js application, I opted to utilize vis.js. Unfortunately, I encountered some issues when attempting to incorporate events. Initially, setting @drop="myDropCallback()" did not trigger the function upon dropping an ite ...
I have encountered an issue where I need to ensure that the useEffect Hook in React runs only once. This is mainly because I am initializing a leaflet.js map that should not be initialized more than once. However, anytime I make changes to the component&a ...
I am looking to dynamically adjust the font size of a button based on the length of a passed-in prop. However, I can't use a dynamic width due to a custom animation applied to the component. Here is my current code: const checkLength = () => { i ...
I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...
I'm currently utilizing OpenLayers and jQuery to map out a GeoJson file containing various features and their properties. My objective is to extract the list of properties associated with a specific feature called "my_feature". In an attempt to achi ...
Currently, I have an email form set up using PHP: <form method="post" action="contactus.php" autocomplete="off"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" maxlength="60" required/ ...