CODEWITHSUNDEEP
javascriptjqueryradio-buttonvelo
Leji Kedus -_-
Leji Kedus -_-

Reputation: 307

How to add radioButtons in wix and link each radio button to a page

I am trying to make radio buttons on wix.com on my website My website it is still being constructed I have gone to support Wix and didn't get anything. I am trying to make radio buttons and linked each radio button to a page each radio button linking to a specific page. I have tried: Html:

<form>
  <fieldset>
    <legend>Choose your Website</legend>

    <input type="radio" id="youtube" name="monster">
    <label for="youtube">Youtube</label><br />

    <input type="radio" id="google" name="monster">
    <label for="google">Google</label><br />

  </fieldset>
</form>
<button id="go_to_website">
  Go to website
</button>

Javascript:

$(document).ready(function() {
      $("#go_to_website").click(function(event) {
        var link_id = $("input[name='monster']:checked").attr("id");
        if (link_id) {
          switch (link_id) {
            case "youtube":
              // code block
              window.location.href = 'www.youtube.com';
              break;
            case "google":
              // code block
              window.location.href = 'www.google.com';
              break;
            default:
              // code block
          }
        } else {
          alert("please pick an option")
        }
      })
    });

Here is what it looks like except I wan it on six and I want it to look better https://jsfiddle.net/pc62oL74/4/#

Upvotes: 0

Views: 1054

Answers (1)

Meredith Hassett
Meredith Hassett

Reputation: 291

If you use the standard Wix Radio Button element, you can interact with it in Corvid plus use the WixLocation API .to() function to navigate to a URL.

It would look something like this: 

import wixLocation from 'wix-location';

export function submitButton_click(event) {
    let url = $w('#radioGroup').value;
    console.log(url)
    wixLocation.to(url);
}

where $w('#radioGroup') is the standard Wix Radio Input element and the values are linked to the URL you want to navigate to. The labels can be the Website name, like Youtube or Google in your example. That can be set up completely in the Drag+Drop environment or via a database connection.

Upvotes: 1

Related Questions