Get value from input radio in a href?

Programming
, , ,
1

?

I am creating a card with the following values:

Subscribers:
Value: 5,50$
Value: 9,50$
Value: 15,50$
--------

Each radio input has a value and a link as a variable. I am passing a variable with the link to the checkout in the value, but I want that when I select a value, it passes the correct variable to the submit button which has a href attribute.

<?php $url = 'wwww.exemplo.com/checkout1'?>
<?php $url2 = 'wwww.exemplo.com/checkout2'?>
<?php $url3 = 'wwww.exemplo.com/checkout3'?>
<?php $url4 = 'wwww.exemplo.com/checkout4'?>
<form>
<input type="radio" name="opcao" id="1" value="<?php echo $url;?>">
<input type="radio" name="opcao" id="2" value="<?php echo $url2;?>">
<input type="radio" name="opcao" id="3" value="<?php echo $url3;?>">
<input type="radio" name="opcao" id="4" value="<?php echo $url4;?>">    
<a href=""><button id="submit">Submit</button>
</form>

How do I get the input value in the href attribute?

2

To get the input value in the href attribute, you can use JavaScript. Here’s the modified code:

<?php $url = 'wwww.exemplo.com/checkout1'?>
<?php $url2 = 'wwww.exemplo.com/checkout2'?>
<?php $url3 = 'wwww.exemplo.com/checkout3'?>
<?php $url4 = 'wwww.exemplo.com/checkout4'?>
<form>
  <input type="radio" name="opcao" id="1" value="<?php echo $url;?>">
  <input type="radio" name="opcao" id="2" value="<?php echo $url2;?>">
  <input type="radio" name="opcao" id="3" value="<?php echo $url3;?>">
  <input type="radio" name="opcao" id="4" value="<?php echo $url4;?>">    
  <a href="" id="submit">Submit</a>
</form>

<script>
  document.getElementById('submit').addEventListener('click', function(event) {
    event.preventDefault(); // Prevent the default form submission
  
    var selectedValue = document.querySelector('input[name="opcao"]:checked').value;
    document.getElementById('submit').href = selectedValue;
  });
</script>

This script adds an event listener to the submit button, which triggers when the button is clicked. It prevents the default form submission behavior and gets the value of the selected radio input. Then, it sets the href attribute of the submit button to the selected value.