checkbox afhankelijk maken van combobox

Status
Niet open voor verdere reacties.

shidan

Gebruiker
Lid geworden
8 jan 2007
Berichten
351
Ik moet een forulier maken voor het aanvragen van examens.
in de combobox kun je kiezen tussen drie disciplines (wetenschappen, techniek en talen)
onderaan kun je een deelvak kiezen.

ik wil enkel de deelvakken zien in functie van de gekozen discipline.
als je bvb 'talen' kiest zou je enkel Nederlands, Frans, Engels en Duits mogen zien.
de rest disabled of gewoon verborgen.


kan iemand mij hierbij helpen?

alvast met dank



Code:
<html>
<head>
    <title>Aanvraag Examen</title>
   
    <script type='text/javascript'>
        function CheckForm() {

            var verantwoordelijke = "";
            switch(document.getElementById("discipline").value){
                case "Wetenschappen": verantwoordelijke = "wetenschappen@gmail.com"
                break;
                case "TechnischeVakken": verantwoordelijke = "techniek@gmail.com"
                break;
                case "Talen": verantwoordelijke = "talen@gmail.com"
                break;

            }
            document.getElementById("MyInput").value =verantwoordelijke;

            var allesOk=true;
            document.getElementById("foutmelding").innerHTML = "&nbsp;";
            var foutmelding = "De volgende velden moeten ingevuld worden:<br /><br/>";

            if(document.getElementById("NaamAanvrager").value == "") {
                foutmelding += "- Naam van de aanvrager<br/>"
                allesOk = false;
            }
            if(document.getElementById("StudentnummerAanvrager").value == "") {
                foutmelding += "- Studentnummer van de aanvrager<br/>"
                allesOk = false;
            }
            if(document.getElementById("Graad").value == "") {
                foutmelding += "- Graad<br/>"
                allesOk = false;
            }
            
            if(!allesOk) {
                document.getElementById("foutmelding").innerHTML = foutmelding;
                document.getElementById("foutmelding").focus();
            }
            else {
                document.getElementById("Form1").submit();
            }
        }
        function ismaxlength(obj){
            var mlength;
            mlength = parseInt(obj.getAttribute("maxlength"));

            if (obj.value.length>mlength){
                alert("Korte omschrijving beperkt tot 1000 karakters");
                obj.value=obj.value.substring(0,mlength);
            }
        }
    </script>
</head>
<body>
    <table border='0' width='100%'>
        <tr>
            
            <td valign='bottom' class='big_title'>Aanvraag Examen</td>
            <td valign='bottom' align='right' class='big_title'>&nbsp;</td>
        </tr>
    </table>
    <hr>
    <table border='0' width='100%' id="table1">

        <form method="get" action="http://svsim618/formhandling/formhandling2.aspx" id="Form1">
            <input id="MyInput" type="hidden" class="veld" name="ConfigTo" value=??? />
            <input type="hidden" class="veld" name="ConfigSubject" value="Nieuwe aanvraag examen" />
            <tr>
                <td id="foutmelding" style="color:Red" colspan="2">&nbsp;</td>
            </tr>
            <tr>
                <td width="32%">Naam aanvrager</td>
                <td><input type="text" class="veld" name="Naam aanvrager" id="NaamAanvrager" value="" size="45" /></td>
            </tr>
            <tr>
                <td style="height: 26px">Studentnummer aanvrager</td>
                <td style="height: 26px"><input type="text" class="veld" name="Studentnummer aanvrager" id="StudentNummerAanvrager" value="" size="45" /></td>
            </tr>
            <tr>
                <td style="height: 26px">Graad</td>
                <td style="height: 26px"><input type="text" class="veld" name="Graad" id="AfdelingSectie" value="" size="45" /></td>
            </tr>
            <tr>
                <td colspan="2"><br><hr size="2"><br></td>
            </tr>
            
            <tr>
                <td>Soort aanvraag</td>
                <td>
                    <select name="soort aanvraag" id="soortAanvraag" class="veld" size="1">
                        <option value="" selected></option>
                        <!--de soorten aanvragen-->
                        <option value="Techniek">Techniek</option>
                        <option value="Wetenschappen">Wetenschappen</option>
                        <option value="Talen">Talen</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><br><br></td>
            </tr>
           
            <tr>
                <td valign="top">Wetenschappen</td>
                <td>
                    <input type="checkbox" name="SoortTest" value=" Chemie">Chemie<br>
                    <input type="checkbox" name="SoortTest" value=" Fysica">Fysica<br>
                    <input type="checkbox" name="SoortTest" value=" Wiskunde"> Wiskunde<br>
                </td>
            </tr>
            
            <tr>
                <td valign="top">Techniek</td>
                <td>
                    <input type="checkbox" name="SoortTest" value=" Elektriciteit">Elektriciteit<br>
                    <input type="checkbox" name="SoortTest" value=" Elektronica">Elektronica<br>
                    <input type="checkbox" name="SoortTest" value=" Mechanica"> Mechanica<br>
                    <input type="checkbox" name="SoortTest" value=" Lassen"> Lassen<br>
                    <input type="checkbox" name="SoortTest" value=" Hydraulica"> Hydraulica<br>
                </td>
            </tr>
            
            <tr>
                <td valign="top">Talen</td>
                <td>
                    <input type="checkbox" name="SoortTest" value=" Nederlands">Nederlands<br>
                    <input type="checkbox" name="SoortTest" value=" Frans">Frans<br>
                    <input type="checkbox" name="SoortTest" value=" Engels"> Engels<br>
                    <input type="checkbox" name="SoortTest" value=" Duits"> Duits<br>
                </td>
            </tr>


            <tr>
                <td colspan="2"><br><hr size="2"><br></td>
            </tr>
            <p>
                <input type='reset' name='wissen' value='Wissen' />
                <input type='button' onclick="CheckForm()" name='versturen' value='Aanvraag test versturen' />
            </p>
        </form>
    </table>

</body>
</html>
 
Kan je hiermee verder...
Code:
--- html ---

<tr>
   <td>
      Soort aanvraag
   </td>
   <td>
      <select id="soortAanvraag" name="soortaanvraag" class="veld" size="1">
         <option value="" selected></option>
         <option value="Techniek">Techniek</option>
         <option value="Wetenschappen">Wetenschappen</option>
         <option value="Talen">Talen</option>
      </select>
   </td>
</tr>
<tr>
   <td>
      &nbsp;<br><hr>
   </td>
</tr>
<tr>
   <td class="toggle toggleWE toggleALL" valign="top">
      Wetenschappen
   </td>
   <td class="toggle toggleWE toggleALL">
      <input type="checkbox" name="SoortTest" value=" Chemie">Chemie<br>
      <input type="checkbox" name="SoortTest" value=" Fysica">Fysica<br>
      <input type="checkbox" name="SoortTest" value=" Wiskunde"> Wiskunde<br>
   </td>
</tr>
<tr>
   <td class="toggle toggleTE toggleALL" valign="top">
      Techniek
   </td>
   <td class="toggle toggleTE toggleALL">
      <input type="checkbox" name="SoortTest" value=" Elektriciteit">Elektriciteit<br>
      <input type="checkbox" name="SoortTest" value=" Elektronica">Elektronica<br>
      <input type="checkbox" name="SoortTest" value=" Mechanica"> Mechanica<br>
      <input type="checkbox" name="SoortTest" value=" Lassen"> Lassen<br>
      <input type="checkbox" name="SoortTest" value=" Hydraulica"> Hydraulica<br>
   </td>
</tr>
<tr id="Talen">
   <td class="toggle toggleTA toggleALL" valign="top">
      Talen
   </td>
   <td class="toggle toggleTA toggleALL">
      <input type="checkbox" name="SoortTest" value=" Nederlands">Nederlands<br>
      <input type="checkbox" name="SoortTest" value=" Frans">Frans<br>
      <input type="checkbox" name="SoortTest" value=" Engels"> Engels<br>
      <input type="checkbox" name="SoortTest" value=" Duits"> Duits<br>
   </td>
</tr>

--- javascript ---

<script type="text/javascript">
function ClearChecks () {
   var Checkboxes = document.querySelectorAll('input[type="checkbox"]');
   for (var i=0; i<Checkboxes.length; i++) {
      Checkboxes[i].checked = false;
   }
}
function ToggleTD (ClassName) {
   var ToggleSet, i;
   ToggleSet = document.getElementsByClassName("toggle");
   for (i=0; i<ToggleSet.length; i++) {
      ToggleSet[i].style.display = "none";
   }
   ToggleSet = document.getElementsByClassName(ClassName);
   for (i=0; i<ToggleSet.length; i++) {
      ToggleSet[i].style.display = "table-cell";
   }
}
var Verantwoordelijke;
var Selector = document.getElementById("soortAanvraag");
Selector.addEventListener("change", function() {
   ClearChecks();
   switch(Selector.value) {
      case "":
         ToggleTD("toggleALL");
         Verantwoordelijke = "";
         break;
      case "Wetenschappen":
         ToggleTD("toggleWE");
         Verantwoordelijke = "wetenschappen@gmail.com";
         break;
      case "Techniek":
         ToggleTD("toggleTE");
         Verantwoordelijke = "techniek@gmail.com";
         break;
      case "Talen":
         ToggleTD("toggleTA");
         Verantwoordelijke = "talen@gmail.com";
         break;
   }
});
</script>

De structuur op deze manier opzetten, zonder 'onclick' in de button
Code:
<form method="get" action="http://svsim618/formhandling/formhandling2.aspx" id="Form1">
   <input type="hidden" class="veld" name="ConfigTo" id="MyInput" value="???" />
   <input type="hidden" class="veld" name="ConfigSubject" value="Nieuwe aanvraag examen" />
   <table border='0' width='100%' id="table1">
      .......
      <tr>
         <td>
            <input type='reset'  name='wissen' value='Wissen' />
            <input type='button' name='versturen' value='Aanvraag versturen' />
         </td>
      </tr>
   </table>
</form>

Ik heb niet gekeken naar html syntax fouten.
De Javascript komt vlak boven de </body> tag.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan