Change value and link depending on radio button selection

Question

I'm trying to get the text value and the link to change depending on which radio button is selected. For example, selecting the first radio button would change the text to "Google" and it would link to google.com. While selecting the second radio button would change the text to "bing" and link to bing.com. I have managed to get the text to change, however the link is not working correctly. Any help would be appreciated.

jsfiddle - https://jsfiddle.net/3yrcusv8/

$('.radiogroup').change(function(e){
    var selectedValue = $(this).val();
    $('#amount').val(selectedValue)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" />
    <input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" />

   
  <input type="submit" name="amount" id="amount" onclick='myFunction()' />
  <script>
    function myFunction() {
   
        if(document.getElementById('radiogroup1').checked) {
            document.getElementById('amount').href = "https://google.com";
        }
    }
    
</script>

Answer 1

Explanation

Okay, so rather than having a large if statement, or a large switch statement, you can set a HTML attribute to contain the relevant URL, in my answer, you can see that I've used data-url. Personally I find this cleaner for the JavaScript side of things, it also means less logic to be processed within the JavaScript run time too.

Considering with the change function, you reference the radio button that has been clicked, you can just access the data-url attribute from there, and just update the a tag.

Another note, using an a tag over a button/input tag makes more sense as an a tags purpose is pretty much to be a link on a page, I'd imagine using your original approach may cause some bugs, especially in specific browsers, at least with an a tag, you know it'll work.

$('.radiogroup').change(function(e) {
  const $this = $(this), $link = $("#url");
  $link.html($this.val());
  $link.attr("href", $this.attr("data-url"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>

Edit

This solution simply uses native JavaScript, nothing else.

const a = document.getElementById("url");
const inputs = document.querySelectorAll('.radiogroup');

// A simple function to handle the click event for each input.
const clickHandler = i => {
  a.href = i.getAttribute("data-url");
  a.textContent = i.getAttribute("value");
};

// Possibly even less code again. 
inputs.forEach(i => i.onclick = () => clickHandler(i));

<input type="radio" name="radiogroup" id="radiogroup1" class="radiogroup" value="Google" data-url="https://google.com" />
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" data-url="https://www.bing.com/" />

<a id="url" href="" target="_blank">null</a>