Pre-populate a value HTML form input depending on another another form field (radio buttons)

Question

I am building a registration form. If the registration type selected (radio button) is "Self" I want to pre-populate the Number of ticket field with '1'. My Code:

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>

Arpit Tyagi · Accepted Answer · 2020-06-04T20:16:34.707

Pure javascript solution will be

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>

You can modify the code above to make the field read-only instead of disabling it altogether replace ticket.disabled with ticket.readOnly

Refer to this answer to understand the difference between disabled and readonly.

How can I make it like if the selected button is Self then the value will be fixed to 1. User can't change it to any other number if the registration type is Self. — Deepjyoti De, Jun 04 '20 at 19:54
Thanks mate. That worked fine. I also had an issue with Email field. I had ``````. But it accepts any string having @ and . For example it accepts [email protected] I need proper validation. Thanks in advance (again) — Deepjyoti De, Jun 04 '20 at 20:33
What do you mean by proper validation? [email protected] is a valid email (assuming b.c is a valid domain). But if you need a tighter validation, you can use . You can find regex for email online — Arpit Tyagi, Jun 04 '20 at 20:54

Nrujal Sharma · Answer 2 · 2020-06-24T23:25:10.320

You need to use the onchange event on the radio buttons

I have created a "setCount" function that takes the number to be set in the count field and sets it in that textbox.

Since the function is parameterized you can use different values for different values in the radio group without creating extra variable to store values for different radio buttons.

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>

Thanks. But how can I fix the value at 1 for "Self"? So that one can't change it from 1 if registering for self. — Deepjyoti De, Jun 06 '20 at 14:16
I edited the code to disable input when selected for self. Check it out. — Nrujal Sharma, Jun 24 '20 at 23:26

Pre-populate a value HTML form input depending on another another form field (radio buttons)

index.html

2 Answers2