CODEWITHSUNDEEP
javascripthtml
JVR
JVR

Reputation: 1

Radio Buttons to create URL from selection

I have 3 Radio Buttons with a Select button - now i need to change the select button to which radio button is selected. For example html code:

 <INPUT TYPE="radio" id="Orange"> Orange
 <INPUT TYPE="radio" id="Apple""> Apple
 <INPUT TYPE="radio" id="Mango"> Mango
 <button>Select</button>

I now would like to link my Select button to get an URL This URL i think i'll have to place either in the html in some array of sort or read from a database.

Any advise on how to link the button and how to embed the URL would be greatly appreciated.

Thanks in advance for reading and commenting.

Upvotes: 0

Views: 560

Answers (2)

Bishoy Bisahi
Bishoy Bisahi

Reputation: 377

<INPUT TYPE="radio" name="URL" id="Orange"> Orange
 <INPUT TYPE="radio" name="URL" id="Apple""> Apple
 <INPUT TYPE="radio" name="URL" id="Mango"> Mango
 <button onclick="getURL();">Select</button>

function getURL(){
var url = document.getElementsByName('URL');
var url_value;
for(var i = 0; i < url.length; i++){
    if(url[i].checked){
        url_value = rates[i].value;
    }
}
location=url_value+'.com';
}

Upvotes: 0

brk
brk

Reputation: 50326

You can pass the url link as value of the radio button. Then on click of button get the value of checked radio button.

HTML

 <INPUT TYPE="radio" id="Orange" name="myRadio" value="www.google.com"> Orange
 <INPUT TYPE="radio" id="Apple" name="myRadio" value="www.mozilla.com"> Apple
 <INPUT TYPE="radio" id="Mango" name="myRadio" value="www.microsoft.com"> Mango
 <button onclick="navigateSite()">Select</button> //trigger navigateSite function

JS

function navigateSite(){
var getUrl = document.querySelector('input[name = "myRadio"]:checked').value
  console.log(getUrl);
  // location.href = getUrl // If you want to navigate to the site
}

EXAMPLE

Upvotes: 1

Related Questions