Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you.

I've tried multiple solutions but none of them seem to be working.

<input type="radio" onclick="Form()" name="userType" value="signup-customer.html" >Client</br><input type="radio" onclick="Form()" name="userType" value="signup-provider.html" >Provider</br
<input type="radio" onclick="Form()" name="userType" value="signup-supervisor.html" >Supervisor</br>

<script>
$(function(){
    $("form").submit(function(e) {
        e.preventDefault();
        window.location = $(this).find('input[type="radio"]:checked').val();
    });
});
</script>

Answer №1

I haven't used jQuery before, but I've written a solution using plain JavaScript:

<input type="radio"  name="userType"  value="signup-customer.html" >Client</br>
<input type="radio" name="userType"  value="signup-provider.html" >Provider
</br>
<input type="radio"  name="userType" value="signup-supervisor.html" >Supervisor</br>
<script>
  const inputs = document.querySelectorAll('input')
  inputs.forEach(input =>{
     input.onchange = (e) => window.location.href = e.target.value
  })
</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

Loop through data and use jQuery to insert it into the server

I am encountering an issue with my code as I attempt to insert data from a loop; unfortunately, I keep getting the error message "Uncaught TypeError: Illegal invocation". window.items = ''; _.forEach(cart.items, function(n, key) ...

What is causing the left scroll to not work with negative values?

My design features three blocks stacked on top of each other with an additional block at the bottom below the middle. Left <--------> Middle<---------->Right -----------------Bottom------------------ I have a couple of queries. Why is scr ...

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

Bundling extraneous server code in client rollup

Can someone help me understand why the following code is being included at the top of my browser bundle by Rollup? It seems like these references are not used anywhere from my entry point. Could it be default includes from node builtins? import require$$0$ ...

Bootstrap - encompassing or layering columns

I am trying to create a layout where two columns overlap or cover each other. The layout should consist of one column on the left side (6 columns) and one on the right side (6 columns). The desired result is to have: left side (8 columns) and right side ...

Bootstrap slider aligned to the right side

I'm currently utilizing bootstrap 3 for my website. However, I encountered an issue with the slider when viewing the page on a mobile device as the image was displaying outside the viewport, shifted to the right. Additionally, in Firefox, the slider ...

What is the best way to make a drop down menu list appear when I click on the parent li, and then show the sub li using JavaScript?

I have a code that includes an image, HTML, and CSS code. Can anyone please tell me how I can set up a drop-down menu list to open the sub <li> elements when I click on a parent <li> using JavaScript? You can see the appearance of the code in t ...

AngularJS - Show Banner after two rows, then show two more rows

I'm attempting to showcase a Banner <div> after 2 rows of 4 x "col-md-3", succeeded by another 2 Rows - thus, resulting in the following markup: <div class="col-md-3">1</div> <div class="col-md-3">2</div> <div clas ...

Is Angular Translate susceptible to race conditions when using static files for multi-language support?

Currently utilizing angular translate with the static files loader for implementing multiple languages in my project. However, I've encountered a problem where the loading of language files sometimes takes longer than loading the actual view itself, l ...

Apply rounded corners to the table row

Currently, I am utilizing a datagrid to display information. I have been attempting to implement border radius on all the table rows, but it doesn't seem to be working. Does anyone have insight into how I can apply border-radius to all rows in the t ...

Filtered Owl Carousel

Hello everyone. Just wanted to mention that our English may not be perfect. I managed to filter with owl carousel by tweaking some codes I found online. It's working now, but I'd love for it to have an animated effect while filtering, like a fad ...

Bootstrap 4 Navigation Bar: Aligning dropdown menu to the right with overflow opening on the right side

Utilizing Bootstrap 4 for a simple navbar, I recently noticed that my right-aligned dropdown opens to the right, causing overflow and displaying the horizontal browser scrollbar. Here is the code for the navbar: <nav class="navbar navbar-expand-lg nav ...

Why is the jQuery ajax file uploading feature failing to function properly in the IE9 standard mode?

My file upload function works well in browsers like Chrome and IE10, but encountered an issue when tested on IE9. The Action controller reported that Request.Files were returning files with '0' length. I'm unsure if this problem is related ...

Problem with ineffective responsive CSS on mobile devices

Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take ...

Unending React cycles - invoking setState() within a render onClick

Recently delving into React and facing an issue with rendering a button component. My goal is to create a button that, upon being clicked, fetches data and displays it as a list below the button. To achieve this, I am attempting conditional rendering. I ut ...

Progressive zoom effect applied to an image in a JavaScript slideshow

Can someone assist me in replicating the zooming effect demonstrated in this code snippet: `http://codepen.io/docode/pen/EjyVQY`. I am specifically focusing on the zooming feature of this slideshow. How can I replicate this zooming effect in JS rather t ...

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Is it possible to store multiple values into a single variable and then access them in a setTimeout function? $(document).ready(function (){ div ({'div':'#noo','auto':'true','pos':'top',' ...

What is the process for connecting controls to Canvas sprites?

Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...

Issues arising from the event target

What is the reason behind this code functioning successfully only when the alert function is called? The color changes after closing the alert box, but if the line with the alert command is commented out, nothing happens. function setLinkColor(el) ...

Using Selenium to trigger a click event on an ng-click directive in AngularJS is not functioning properly

I am currently trying to confirm that a specific external function is being called when an ng-click event occurs. The code for the input declaration is shown below. While everything seems to be functioning properly in browsers, I am encountering issues dur ...