1
votes

formulaire html utilisant javaScript pour appeler une fonction

Je suis débutant et j'essaye de mettre en place un formulaire. J'ai écrit le code html / css. Ce que je voulais faire est de cliquer sur un niveau d'études tel que Bachelor, je veux que tous les cours sous licence s'affichent dans la deuxième case (choisissez cours) tout en cachant le reste des cours dans la case.

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
                </form>
                <br>

                <form id="form2" action="#">
                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                        <optgroup label="Bachelors">
                            <option>Microbiology</option>
                            <option>chemistry</option>
                            <option>physics</option>
                        </optgroup>
                        <optgroup label="Postgraduates">
                            <option>computer</option>
                            <option>biology</option>
                            <option>accounting</option>
                        </optgroup>

                        <optgroup label="PhD">
                            <option>business</option>
                            <option>fisheries</option>
                            <option>agric</option>
                        </optgroup>
                    </select>
                    
                </form>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

javascript html css forms

0 commentaires

6 Réponses :

1
votes

Ajoutez simplement l'événement onClick dans la <option> ?

<option onClick="myFunction()">Microbiology</option>

<script>
function myFunction() {
  //do what you want..
}
</script>```

0 commentaires

1
votes

Ajoutez un événement onchange au champ de sélection et transmettez la valeur à une fonction telle que;

    function setLevel (val) {
        var elements = document.getElementsByTagName('optgroup');

        // Loop through all elements and check if they are hidden or shown
        for(var i=0; i < elements.length; i++) {
            if (elements[i].id === 'course_' + val) {
                elements[i].style.display = 'block';
            } else {
                elements[i].style.display = 'none';
            }
        }
    }

Masquer tous les groupes d'options dans css;

<optgroup label="Bachelors" id="course_bachelor">

Donnez à tous les groupes d'options un identifiant unique contenant la valeur de la première sélection, comme;

#cour optgroup {
    display:none;
}

Et maintenant, la fonction de l'événement onchange pourrait être quelque chose comme ça;

<select id="level-select" onchange="setLevel(this.value)">

0 commentaires

1
votes

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
               
                <br>

                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                       
                    </select>
                    
                </form>

var select = document.getElementById("level-select");
select.onchange(() => {
if(select.value == 'bachelor') {
document.getElementById("cour").value == "<optgroup label="Bachelors">
                        <option>Microbiology</option>
                        <option>chemistry</option>
                        <option>physics</option>
                    </optgroup>"
}

})

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

Faites ceci pour toutes les conditions.

3 commentaires

Je pense que c'est une mauvaise pratique d'injecter du html avec du javascript, car cela rend le code illisible la plupart du temps. Vous pouvez également introduire des vulnérabilités xss.

Ensuite, vous devez utiliser un style simple comme réduire dans bootstrap. Cela aidera également.

En effet! De toute façon, je pense qu'il vaut mieux utiliser un framework que des trucs de vanille, car le code est plus structuré de cette façon et la plupart du code ennuyeux est déjà fait. ;)

1
votes

Ici, j'ai trouvé une solution simple à cela. J'ai un peu changé votre html. J'ai mis les mêmes valeurs que leur optgroup d » label afin que nous puissions choisir le spécifique optgroup pour être montré. La solution est donc simple:

Cachez toutes les options de la deuxième case.
Afficher celui-ci par courses.querySelector('[label="' + value + '"]'); this, où value est la valeur sélectionnée de votre première boîte.

Jetez un œil à l'extrait de code ci-dessous:

<h2>This is a form</h2>

<p>Online Application:</p>

<form id="form1" action="#">
    <label for="school-select">Choose levels of study:</label>

    <select id="level-select" onchange="getLevels()">
        <option value="">--Please choose an option--</option>
        <option value="Bachelors">Bachelors</option>
        <option value="Postgraduates">Postgraduates</option>
        <option value="PhD">PhD</option>
    </select>

</form>
<br>

<form id="form2" action="#">
    <label for="course-select">Choose course:</label>

    <select id="cour">
        <option selected>--Choose Course--</option>
        <optgroup label="Bachelors">
            <option>Microbiology</option>
            <option>chemistry</option>
            <option>physics</option>
        </optgroup>
        <optgroup label="Postgraduates">
            <option>computer</option>
            <option>biology</option>
            <option>accounting</option>
        </optgroup>

        <optgroup label="PhD">
            <option>business</option>
            <option>fisheries</option>
            <option>agric</option>
        </optgroup>
    </select>

</form>

function getLevels() {
    var value = document.getElementById("level-select").value;

    if (value) {
        var courses = document.querySelector("#cour");
        var all_options = courses.querySelectorAll('optgroup');
        var show_courses = courses.querySelector('[label="' + value + '"]');

        all_options.forEach(function (element) {
            element.style.display = "none";
        });

        show_courses.style.display = "block";
    }

}

2 commentaires

Thumb Up ... exactement ce dont j'avais besoin

@Ayplux, mon plaisir :)

1
votes

Vous devrez utiliser du Javascript pour ce faire. Voici une solution qui pourrait fonctionner pour vous.

J'ai mis à jour certains de vos noms html (premières valeurs de liste déroulante pour correspondre exactement aux étiquettes «optgroup» dans votre deuxième liste déroulante). Ajout de CSS pour que les options de la liste déroulante des cours ne s'affichent pas tant que vous n'avez pas sélectionné une option valide, ce qui empêche l'utilisateur de, par exemple, revenir en arrière pour modifier la première valeur de la liste déroulante tandis que la deuxième valeur de la liste déroulante reste la même. Votre interface utilisateur est toujours à l'épreuve des idiots:

<h2>This is a form</h2>
  <p>Online Application:</p>
  <form id="form1" action="#">
    <label for="school-select">Choose levels of study:</label>
    <select id="level-select">
      <option value="">--Please choose an option--</option>
      <option value="bachelors">Bachelors</option>
      <option value="postgraduates">Postgraduates</option>
      <option value="phd">PhD</option>
    </select>
  </form>
  <br>
  <form id="form2" action="#">
    <label for="course-select">Choose course:</label>
    <select id="cour">
      <option value="default"></option>
      <optgroup label="bachelors">
        <option>Microbiology</option>
        <option>chemistry</option>
        <option>physics</option>
      </optgroup>
      <optgroup label="postgraduates">
        <option>computer</option>
        <option>biology</option>
        <option>accounting</option>
      </optgroup>
      <optgroup label="phd">
        <option>business</option>
        <option>fisheries</option>
        <option>agric</option>
      </optgroup>
    </select>
  </form>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

#cour optgroup {
  display:none;
}

//grab both dropdowns and store in variable
var levelSelectDropdown = document.querySelector('#level-select');
var coursesDropdown = document.querySelector('#cour');

//create an on 'change' event for first dropdown 
levelSelectDropdown.addEventListener('change', levelDropdownChange);

function levelDropdownChange(e){
  var selectedLevelOfStudy = e.target.value;
  var coursesGroups = coursesDropdown.querySelectorAll('optgroup');
  
  //this basically hides the 'default' empty option that's auto-selected
  //by default
  coursesDropdown.querySelector('option[value="default"]').style.display = 'none';
  
  //loop through all 'optgroup' items in second dropdown (coursesGroups)
  coursesGroups.forEach(function(element){
    //default course dropdown to first element (this essentially resets
    //the course dropdown each time level of study dropdown is changed
    coursesDropdown.selectedIndex = 0;
    //make sure all optgroups are hidden
    element.style.display = 'none';
    //only display optgroup whose label matches the value selected
    //from first dropdown
    if(element.getAttribute('label') == selectedLevelOfStudy){
      element.style.display = 'block';
    }
  })
}

0 commentaires

0
votes

<h2>This is a form</h2>

            <p>Online Application:</p>

                <form id="form1" action="#">

   <script lang="javascript">
function onLevelofStudyChange()
{
  var selectedLevel=document.getElementById("level-select").value;
  var course = document.querySelector("#cour");
  var alloption = course.querySelectorAll('optgroup')
  var getByLabel = course.querySelector('[label="'+selectedLevel+'"]');

   
//Hide all Optgroups
alloption.forEach(function(element){
 element.style.display = "none";
});


if(getByLabel!=null)
   getByLabel.style.display = "block";

}
</script>
                    <label for="school-select">Choose levels of study:</label>

                    <select id="level-select" onchange="onLevelofStudyChange()">
                        <option value="">--Please choose an option--</option>
                        <option value="bachelor">Bachelors</option>
                        <option value="postgraduates">Postgraduates</option>
                        <option value="phd">PhD</option>
                        
                    </select>
                    
                </form>
                <br>

                <form id="form2" action="#">
                    <label for="course-select">Choose course:</label>

                    <select id="cour">
                        <option>--Please Choose course--</option>
                        <optgroup label="bachelor" style="display:none">
                            <option>Microbiology</option>
                            <option>chemistry</option>
                            <option>physics</option>
                        </optgroup>
                        <optgroup label="postgraduates" style="display:none">
                            <option>computer</option>
                            <option>biology</option>
                            <option>accounting</option>
                        </optgroup>

                        <optgroup label="phd" style="display:none">
                            <option>business</option>
                            <option>fisheries</option>
                            <option>agric</option>
                        </optgroup>
                    </select>
                    
                </form>

label {
  font-family: sans-serif;
  font-size: 1rem;
  padding-right: 10px;
}

select {
  font-size: .9rem;
  padding: 2px 5px;
}

Essayez ceci, cela devrait également fonctionner, notez que j'ai changé l'étiquette d'Optgroup afin de correspondre à la valeur du premier menu déroulant

0 commentaires