Choosing among radio buttons and Text Field

Question

I have 2 radio buttons. All of them have different values. I also have one text field, in case I need a different value, I can enter that value on that text field.

    <form action="" onsubmit="return doSubmit(this)">
    <input type="radio" name="url" value="https://example.com/fee/25"> $25
    <input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
  </form>

and here is the Javascript I've found to make radio buttons working

    <script type="text/javascript">
function doSubmit(form) {
    var urls = form['url'];
    var i = urls && urls.length;
    while (i--) {
      if (urls[i].checked) {
        window.location = urls[i].value;
      }
    }
document.getElementById("amount").value;
    return false;
  }

  </script>

I have one text field:

<input type="text" name="amount" size="10" id="amount" value="">

Ok. If the amount is entered, then I need to use this code:

document.getElementById("amount").value

But how to make it working with radio buttons? I have created this JS code:

<script type="text/javascript">
    var link = "https://example.com/fee/";
    var input= document.getElementById('amount');
    input.onchange=input.onkeyup= function() {
        link.search= encodeURIComponent(input.value);
      };
</script>

What I'm doing wrong? Thanks in advance for your time. I love and enjoy learning from experts.

Answer 1

I would create a separate radio button for the text input:

var options = Array.from(document.querySelectorAll("[name=url]"));

amount.addEventListener('focus', function() {
    options[0].checked = true; // If textbox gets focus, check that radio button
});

options[0].addEventListener('change', function() {
    amount.focus(); // if first radio button gets checked, focus on textbox.
});

function doSubmit(form) {
    // get checked value, replace empty value with input text
    var value = options.find( option => option.checked ).value || amount.value; 
    window.location = "https://example.com/fee/" + value;
    return false;
};

<form action="" onsubmit="return doSubmit(this)">
    <input type="radio" name="url" value="" checked>
         $<input type="text" name="amount" size="5" id="amount" value="" >
    <input type="radio" name="url" value="25"> $25
    <input type="radio" name="url" value="50"> $50
    <input type="submit" value="Submit">
</form>

Answer 2

Instead of using the url as the value for the radio buttons, consider using the value you wish to pass to the url:

function doSubmit(form) {
    var endpoint = "https://example.com/fee/";
    
    // gets the values of input elements that were selected
    var checkedValues = Array.from(form.amounts)
      .filter(radio => radio.checked)
      .map(radio => radio.value);
    
    // if a radio button was checked, use its value
    // otherwise, use the value in the text field
    var amount = checkedValues.length ? 
        checkedValues[0] : form.amount.value;
    
    console.log('redirecting to: ', endpoint + amount);
    return false;
}

// uncheck radio buttons when text is entered
function uncheck() {
  Array.from(document.querySelectorAll('input[name="amounts"]'))
    .forEach(radio => radio.checked = false);
}

<form action="" onsubmit="return doSubmit(this)">
  <input type="radio" name="amounts" value="25"> $25
  <input type="radio" name="amounts" value="50"> $50
  <input type="text" name="amount" onkeyup="uncheck()">
  <input type="submit" value="Submit">
</form>

Edit: Wow I completely forgot you could use the :checked attribute as a css selector. In this case, the code becomes quite simple:

function doSubmit(form) {
    // select checked inputs with the specified name attribute
    var checkedRadio = document.querySelector('input[name="amounts"]:checked')
    
    // if we have a radio button that is checked, use its value
    // otherwise, use the text input's value
    var amount = checkedRadio ? checkedRadio.value : form.amount.value;
    
    window.location = 'https://example.com/fee/' + amount;
    return false;
}

// uncheck radio buttons when text is entered
function uncheck() {
  Array.from(document.querySelectorAll('input[name="amounts"]'))
    .forEach(radio => radio.checked = false);
}

<form action="" onsubmit="return doSubmit(this)">
  <input type="radio" name="amounts" value="25"> $25
  <input type="radio" name="amounts" value="50"> $50
  <input type="text" name="amount" onkeyup="uncheck()">
  <input type="submit" value="Submit">
</form>