根据页面加载时的单选按钮选择显示某些字段

Question

I am dragging data from a database and want to display different disabled form fields dependant on the selected radio button.

I have tried using onload="javascript:...." but it's not working.

HTML:

 <fieldset>
      <legend>Employment/Education Details</legend>
      <div class="input-wrapper">
         <label>Are you?<br>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" <?php if 
($employment_status=="employed") echo "checked"; ?> disabled><label for="employed">Employed</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed"  <?php if 
($employment_status=="self_employed") echo "checked"; ?> disabled><label for="self_employed">Self Employed</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="student" id="student" <?php if 
($employment_status=="student") echo "checked"; ?> disabled><label for="student">Student</label>
         <input type="radio" onload="javascript:employmentCheck();" name="employment_status" value="other" id="other" <?php if 
($employment_status=="other") echo "checked"; ?> disabled><label for="other">Other</label>
         </label>
      </div>
      <div id="college_nus" style="display:none">
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>College or NUS Number
                  <input type="text" name="college_nus"  value="<?php echo $college_nus; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
      </div>
      <div id="employment_details" style="display:none">
    <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employer Name
                  <input type="text" name="employment_company" value="<?php echo $employment_company; ?>" disabld>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Job Title
                  <input type="text" name="employment_title" value="<?php echo $employment_title; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Address
                  <textarea name="employment_address" rows="4" value="<?php echo $employment_address; ?>" disabled></textarea>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>
                     Occupation
                  <input type="text"  value="<?php echo $occupation; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Email
                  <input type="text" name="employment_email"  value="<?php echo $employment_email; ?>" disabled>
                  </label>
               </div>
            </div>
            <div class="large-6 columns">
               <div class="input-wrapper">
                  <label>Employment Phone
                  <input type="text" name="employment_phone"  value="<?php echo $employment_phone; ?>" disabled>
                  </label>
               </div>
            </div>
         </div>
      </div>
   </fieldset>

Javascript:

function employmentCheck() {
    if (document.getElementById('student').checked) {
        document.getElementById('college_nus').style.display = 'block';
    }
    else document.getElementById('college_nus').style.display = 'none';

    if (document.getElementById('employed').checked || document.getElementById('self_employed').checked) {
        document.getElementById('employment_details').style.display = 'block';
    }
    else document.getElementById('employment_details').style.display = 'none';

}

Can anyone help please?

Answer 1

I changed the function to window.onload and it worked fine. Here is a plunker.

https://plnkr.co/edit/Pz2rKRg9geglgKhdJM4H?p=preview

Here is the function

window.onload = function(){
    if (document.getElementById('student').checked) {
        console.log("student");
        document.getElementById('college_nus').style.display = 'block';
    }
    else {
        document.getElementById('college_nus').style.display = 'none';
    }

    if (document.getElementById('employed').checked ||  document.getElementById('self_employed').checked) {
        console.log("employed");
        document.getElementById('employment_details').style.display = 'block';
    }
    else {
        document.getElementById('employment_details').style.display = 'none';
    }
}

I don't think there is an event of onload defined on the radio button object.

Thanks

Paras