在页面加载时显示取决于单选按钮选择的某些字段

我正在从数据库中拖动数据，并希望根据所选单选按钮显示不同的禁用表单域。在页面加载时显示取决于单选按钮选择的某些字段

我已经尝试使用onload =“javascript：....”但它不工作。

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

}

谁能帮助吗？

来源

2016-05-12 John Higgins

如果不工作，你的意思是你收到错误消息？ – pparas

对不起，错过了那一点！它会从数据库中的内容中选择正确的单选按钮，但不会使用javascript显示与该单选按钮相关的字段。当你用onclick手动点击一个单选按钮时，它可以正常工作，但不会打开。 –

我将函数更改为window.onload，它工作正常。这是一个重要人物。

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

下面是函数

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'; 
    } 
}

我不认为这是单选按钮对象上定义的onload的事件。

感谢

帕拉斯

来源

2016-05-12 14:32:59 pparas

工作魅力！谢谢@ user886393 –

在页面加载时显示取决于单选按钮选择的某些字段

回答

相关问题