javascript - 在单选按钮和文本字段之间进行选择

Question

我有 2 个单选按钮。他们都有不同的值(value)观。我还有一个文本字段，如果我需要不同的值，我可以在该文本字段中输入该值。

    <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>

这是我发现的让单选按钮工作的 Javascript

    <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>

我有一个文本字段:

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

好的。如果输入了金额，那么我需要使用此代码:

document.getElementById("amount").value

但是如何让它与单选按钮一起工作呢？我创建了这个 JS 代码:

<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>

我做错了什么？在此先感谢您的时间。我喜欢并享受向专家学习。

Answer 1

我会为文本输入创建一个单独的单选按钮:

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>