How to call a JavaScript function from Select Option with Html

Question

I need to call a javascript fuction when the user select 2 options : Refusé and Activé

so I did this but it doesn't work

edit : I don't get any errors but after choosing Activé or Refusé the span and the checkbox don't show up the function Visibility isn't called**

<body onload="hidecheckbox()">    

 <script>
    function hidecheckbox() {
        document.getElementById("checkbox").style.visibility = "hidden";
    }
    </script>
  

 <div>
    <span >Etat de la candidature</span>
    <select name="etat">
       <option  value="En cours">En cours de traitement</option>
       <option onclick="Visibility()" value="Accepté">Accepté</option>
      <option onclick="Visibility()" value="Refusé">Refusé</option>                                    
   </select>
</div>                   
<div id="checkbox" >
   <span>Envoyer un email automatique </span>
   <input type="checkbox" name="check" id="check" value="Envoyer un email automatique">
</div>
           
<script>
function Visibility() 
{                  
   document.getElementById("checkbox").style.visibility = "visible";
 }
 </script>

Where is `hidecheckbox` used? [What Do You Mean “It Doesn’t Work”?](//meta.stackexchange.com/q/147616/289905) Please, [edit] your question and provide a [mre], along with your _desired_ results, your _actual_ results, including all _errors_, and demonstrate _your research and your attempts_ and explain what precisely didn’t work. Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. The dev tools provide an **Inspector** / **Elements**. Use it to your advantage. Please [validate your HTML](//html5.validator.nu/). — Sebastian Simon, Aug 24 '21 at 15:40
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Aug 24 '21 at 15:41
```document.getElementsByTagName("etat").addEventListener("change", hideCheckbox);``` — esQmo_, Aug 24 '21 at 15:42
@akhilrawat001 i did it because when I first wrote `
` it didn't show up so I added a space. Anyway is that your answer to my question or do you have an other one solution to help me please — Jasmine, Aug 24 '21 at 15:42
@esQmo_ What about this line of code? This will result in a TypeError. — Sebastian Simon, Aug 24 '21 at 15:44
@SebastianSimon I don't get an error but the span and checkbox don't show up after choosing `activé` or `refusé` — Jasmine, Aug 24 '21 at 15:47

score 2 · Accepted Answer · answered Aug 24 '21 at 15:44

You may use onChange event on the select

<select name="etat" id="mySel" onChange="Visibility()">
  <option value="En cours">En cours de traitement</option>
  <option value="Accepté">Accepté</option>
  <option value="Refusé">Refusé</option>
</select>

and then change the Javascript

function Visibility() {
  var sel = document.getElementById("mySel").value;
  /* Use the above value of select option */
  document.getElementById("checkbox").style.visibility = "visible";
}

Anas Nisar · Answer 2 · 2021-08-24T16:14:28.473

1

One way of doing this would be adding onchange to select. Also, you can pass this as parameter to get the target inside the function. Something like this should be fine:

   <select name="etat" onchange="Visibility(this)">
       <option value="Accepté">Accepté</option>
      <option value="Refusé">Refusé</option>                    
   </select>

You can then access the option selected using the value attribute like this:

function Visibility(e) 
{                  
  console.log(e.value)
   document.getElementById("checkbox").style.visibility = "visible";
 }

edited Aug 24 '21 at 16:14

answered Aug 24 '21 at 16:00

Anas Nisar

104
7

The _recommended_ way would be `document.querySelector("select[name='etat']").addEventListener("change", () => document.getElementById("checkbox").style.visibility = "visible");`. Don’t suggest `onchange` attributes. – Sebastian Simon Aug 24 '21 at 16:10

score 1 · Answer 3 · answered Aug 24 '21 at 16:04

The onclick attribute on <option> tag does not work. Instead you can use an onChange attribute on the <select> tag. Here is how it would work.

  <select id="select" name="etat" onChange="Visibility()">
    <option value="En cours">En cours de traitement</option>
    <option value="Accepté">Accepté</option>
    <option value="Refusé">Refusé</option>
  </select>

And then inside your Visibility function.

function Visibility() {
  let option = document.getElementById("select").value;

  if (option === "Accepté" || option === "Refusé") {
    // If you selected Accepté or Refusé show the checkbox
    document.getElementById("checkbox").style.visibility = "visible";
  } else {
    // If you selected En cours de traitement hide the checkbox
    document.getElementById("checkbox").style.visibility = "hidden";
  }
}

score 0 · Answer 4 · answered Aug 24 '21 at 15:49

I have created a fiddle. https://jsfiddle.net/fmo2drwx/ I have renamed some elements.

<script>
function hideCheckbox() {
  document.getElementById("checkbox").style.visibility = "hidden";
}

function changeVisibility() {
  document.getElementById("checkbox").style.visibility = "visible";
}</script>
<div>
  <span>Etat de la candidature</span>
  <select name="etat">
    <option value="En cours">En cours de traitement</option>
    <option onClick="changeVisibility()" value="Accepté">Accepté</option>
    <option onClick="changeVisibility()" value="Refusé">Refusé</option>
  </select>
</div>
<div id="checkbox" style="visibility: hidden;">
  <span>Envoyer un email automatique </span>
  <input type="checkbox" name="check" id="check"  value="Envoyer un email automatique">
</div>

How to call a JavaScript function from Select Option with Html

4 Answers4