Anzeige bestimmter Felder abhängig von Auswahlknopf beim Laden der Seite

Ich ziehe Daten aus einer Datenbank und möchte abhängig vom ausgewählten Optionsfeld verschiedene deaktivierte Formularfelder anzeigen.Anzeige bestimmter Felder abhängig von Auswahlknopf beim Laden der Seite

Ich habe versucht mit onload = "javascript: ....", aber es funktioniert nicht.

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

}

Kann mir jemand bitte helfen?

Quelle

2016-05-12 John Higgins

von nicht funktioniert, tun Sie bedeuten Sie eine Fehlermeldung bekommen? – pparas

Sorry, verpasste das bisschen! Es wählt den richtigen Radio-Button aus dem, was in der Datenbank ist, aber es zeigt nicht die relevanten Felder für diesen Radio-Button mit Javascript. Es funktioniert gut, wenn Sie manuell auf ein Optionsfeld mit einem onclick, aber nicht onload klicken. –

Ich habe die Funktion in window.onload geändert und es hat gut funktioniert. Hier ist ein Plünderer.

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

Hier ist die Funktion

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

Ich glaube nicht, dass es ein Ereignis von onload auf das Optionsfeld-Objekt definiert.

Dank

Paras

Quelle

2016-05-12 14:32:59 pparas

Arbeitete ein Charme! Danke @ user886393 –

Anzeige bestimmter Felder abhängig von Auswahlknopf beim Laden der Seite

Antwort

Verwandte Themen