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

我正在建立一个登记表。如果选择的注册类型（单选按钮）为“Self”，我想用“1”预先填充票证编号字段。 我的代码：

index.html

注册类型：


自己


团体


公司的


其他


门票数量（不超过25张）

纯javascript解决方案将

var radios=document.getElementsByName（'regType'）；
var ticket=document.getElementById（'ticket'）；
用于（收音机中的收音机）{
收音机[radio].onclick=function（）{
如果（this.value==='Self'）{
ticket.value='1'；
ticket.disabled=true；
}否则{
票证价值=“”；
ticket.disabled=false；
}
}
}

注册类型：


自己


团体


公司的


其他


门票数量（不超过25张）

纯javascript解决方案将

var radios=document.getElementsByName（'regType'）；
var ticket=document.getElementById（'ticket'）；
用于（收音机中的收音机）{
收音机[radio].onclick=function（）{
如果（this.value==='Self'）{
ticket.value='1'；
ticket.disabled=true；
}否则{
票证价值=“”；
ticket.disabled=false；
}
}
}

注册类型：


自己


团体


公司的


其他


门票数量（不超过25张）

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

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

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

函数setCount（val，disableInput=false）{
const inputBox=document.getElementById（'count'）；
inputBox.value=val；
如果（disableInput）inputBox.disabled=true；
}

自己


团体


公司的

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

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

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

函数setCount（val，disableInput=false）{
const inputBox=document.getElementById（'count'）；
inputBox.value=val；
如果（disableInput）inputBox.disabled=true；
}

自己


团体


公司的

如果所选按钮为Self，则该值将固定为1。如果注册类型为Self，用户无法将其更改为任何其他号码。我已更新答案以禁用文本字段。谢谢。效果很好。我也有一个问题与电子邮件领域。我有

。但它接受任何带有@和的字符串。例如，它接受a@b.c我需要适当的验证。提前（再次）感谢你所说的正确验证是什么意思？a@b.c是有效电子邮件（假设b.c是有效域）。但如果需要更严格的验证，可以使用。你可以找到regex for email Online我怎样才能让它看起来像如果选择的按钮是Self，那么该值将固定为1。如果注册类型为Self，用户无法将其更改为任何其他号码。我已更新答案以禁用文本字段。谢谢。效果很好。我也有一个问题与电子邮件领域。我有

。但它接受任何带有@和的字符串。例如，它接受a@b.c我需要适当的验证。提前（再次）感谢你所说的正确验证是什么意思？a@b.c是有效电子邮件（假设b.c是有效域）。但如果需要更严格的验证，可以使用。您可以在电子邮件OnlineHanks中找到正则表达式。但是如何将“Self”的值固定为1呢？因此，如果注册为self，则无法将其从1更改为1。我编辑了代码，以在选择为self时禁用输入。看看，谢谢。但是如何将“Self”的值固定为1呢？因此，如果注册为self，则无法将其从1更改为1。我编辑了代码，以在选择为self时禁用输入。过来看。

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