根据另一个表单字段（单选按钮）预填充值 HTML 表单输入

Posted 2023-05-09

【中文标题】根据另一个表单字段（单选按钮）预填充值 HTML 表单输入

【英文标题】：Pre-populate a value HTML form input depending on another another form field (radio buttons)

【发布时间】：2020-09-23 21:51:53

【问题描述】：

我正在构建一个注册表单。如果选择的注册类型（单选按钮）是“Self”，我想用“1”预填充“票数”字段。 我的代码：

index.html

<div class="containerx">
    
            <h2>Registration type: </h2>
            
          <ul id="ullu">
          <li>
            <input type="radio" id="f-option" name="regType" value="Self" required>
            <label for="f-option">Self</label>
            
            <div class="check"></div>
          </li>
            <li>
            <input type="radio" id="s-option" name="regType" value="Group" required>
            <label for="s-option">Group</label>
            
            <div class="check"></div>
          </li>
                  <li>
            <input type="radio" id="t-option" name="regType" value="Corporate" required>
            <label for="t-option">Corporate</label>
            
            <div class="check"></div>
          </li>
                
          <li>
            <input type="radio" id="fo-option" name="regType" value="Others" required>
            <label for="fo-option">Others</label>
            
            <div class="check"><div class="inside"></div></div>
          </li>
          
          
        </ul>
        </div>
           <fieldset class="form-fieldset ui-input __first" style="z-index: 0">
            <input type="number" required id="ticket" tabindex="0" name="ticketNo" min="1" max="25"/>
            <label for="ticket">
              <span data-text="Number of Tickets (Not more than 25)">Number of Tickets (Not more than 25)</span>
            </label>
          </fieldset>

【参考方案1】：

纯javascript解决方案将是

var radios = document.getElementsByName('regType');
var ticket = document.getElementById('ticket');

for(radio in radios) 
    radios[radio].onclick = function() 
      if (this.value === 'Self') 
          ticket.value = '1';
          ticket.disabled = true;
        else 
          ticket.value = '';
          ticket.disabled = false;
       
    

<div class="containerx">

            <h2>Registration type: </h2>

          <ul id="ullu">
          <li>
            <input type="radio" id="f-option" name="regType" value="Self" required>
            <label for="f-option">Self</label>

            <div class="check"></div>
          </li>
            <li>
            <input type="radio" id="s-option" name="regType" value="Group" required>
            <label for="s-option">Group</label>

            <div class="check"></div>
          </li>
                  <li>
            <input type="radio" id="t-option" name="regType" value="Corporate" required>
            <label for="t-option">Corporate</label>

            <div class="check"></div>
          </li>

          <li>
            <input type="radio" id="fo-option" name="regType" value="Others" required>
            <label for="fo-option">Others</label>

            <div class="check"><div class="inside"></div></div>
          </li>


        </ul>
        </div>
           <fieldset class="form-fieldset ui-input __first" style="z-index: 0">
            <input type="number" required id="ticket" tabindex="0" name="ticketNo" min="1" max="25"/>
            <label for="ticket">
              <span data-text="Number of Tickets (Not more than 25)">Number of Tickets (Not more than 25)</span>
            </label>
          </fieldset>

您可以修改上面的代码以使该字段为只读而不是完全禁用它 将ticket.disabled 替换为ticket.readOnly

参考this answer了解禁用和只读的区别。

【讨论】：

如果选择的按钮是Self，那么如何设置它的值将固定为1。如果注册类型是Self，用户不能将其更改为任何其他数字。

我已经更新了禁用文本字段的答案。

谢谢伙计。那工作得很好。我也遇到了电子邮件字段的问题。我有<input type="email" id="email" tabindex="0" name="email" required />。但它接受任何具有 @ 和 的字符串。例如它接受 a@b.c 我需要适当的验证。提前感谢（再次）

正确验证是什么意思？ a@b.c 是一个有效的电子邮件（假设 b.c 是一个有效的域）。但如果您需要更严格的验证，您可以使用 。您可以在线查找电子邮件的正则表达式

【参考方案2】：

您需要在单选按钮上使用 onchange 事件

我创建了一个“setCount”函数，它将要在计数字段中设置的数字设置在该文本框中。

由于函数是参数化的，您可以为单选组中的不同值使用不同的值，而无需创建额外的变量来存储不同单选按钮的值。

function setCount(val, disableInput=false) 
  const inputBox = document.getElementById('count');
  inputBox.value = val;
  if (disableInput) inputBox.disabled = true;

<!DOCTYPE html>
<html>
<body>
  <ul id="ullu">
    <li>
      <input type="radio" id="f-option" onchange="setCount(1, true)" name="regType" value="Self" required>
      <label for="f-option">Self</label>

      <div class="check"></div>
    </li>

    <li>
      <input type="radio" id="s-option" onchange="setCount(5)" name="regType" value="Group" required>
      <label for="s-option">Group</label>

      <div class="check"></div>
    </li>

    <li>
      <input type="radio" id="t-option" onchange="setCount(50)" name="regType" value="Corporate" required>
      <label for="t-option">Corporate</label>

      <div class="check"></div>
    </li>
  </ul>
  
  <input type='number' id='count'/>
</body>
</html>

【讨论】：

谢谢。但是如何将“Self”的值固定为 1？因此，如果为自己注册，则无法将其从 1 更改。

我编辑了代码以在为 self 选择时禁用输入。看看吧。