Change value and link depending on radio button selection

Admin 1
Viewed 4398

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>

radio-button html jquery javascript
4 Answers

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>

user_81880600

Not sure why you try to change the href of the submit input, the input doesn't take href as an attribute and it won't do anything if it was changed as well.

Simply redirect the user when they click the button inside the function.

function myFunction() {
    if(document.getElementById('radiogroup1').checked) {
        window.location.replace("http://google.com");
    } else {
      window.location.replace("http://bing.com");
    }
}
user_87276080

You can use custom attributes to pass the URL around as below, if you want the user to click the button to open the page.

Google refuses the connection from their end, but you can see from the Bing option that the code works.

// Add click event to radiogroup
$('.radiogroup').change(function(e) {

  // Update url attribute and value of button from radio button
  $('#amount').attr("url", $(this).attr("url")).val($(this).val());
 
});

// Add click event to submit button
$(document).on("click", "#amount", function() {

  // Print URL to console (Can be deleted)
  console.log( $(this).attr("url") );
  
  // Open page in window
  window.location.assign($(this).attr("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" url="http://google.com"/> Google
<input type="radio" name="radiogroup" id="radiogroup2" class="radiogroup" value="Bing" url="http://bing.com" /> Bing (working)


<input type="submit" name="amount" id="amount"  />

user_56048520

We can use a dynamic function to pull this off.

You can simply make a dynamic function in JS that will work for n number of radial buttons by fetching their value attribute and id and change the input button accordingly.

The code snippet:

<input id="google" type="radio" name="radiogroup" class="radiogroup" value="Google" onclick="changeLink(event)" />
<input id="bing" type="radio" name="radiogroup" class="radiogroup" value="Bing" onclick="changeLink(event)" />
<input type="submit" name="amount" id="btn" />
    <script>
      const changeLink = e => {
          let _target = e.currentTarget.id, //get the id name.
              targetValue = document.getElementById(_target).getAttribute('value'), //use id name to fetch value attribute.
              btn = document.getElementById('btn'); //get the btn element from DOM.

        btn.setAttribute('value', targetValue); //set btn elements 'src' attribute to the value of the radial button clicked.
        btn.setAttribute('src', 'https://' + targetValue.toLowerCase() + '.com'); //same src but convert to lower case first.
        
        console.log(btn); //for testing the link
      }
    </script>

user_108498870
Related