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”? Please, edit your question and provide a minimal reproducible example, 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) (hit F12) and read any errors. The dev tools provide an Inspector / Elements. Use it to your advantage. Please validate your HTML. — Sebastian Simon
– Sebastian Simon, Commented Aug 24, 2021 at 15:40
Inline event handlers like onclick are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener instead. — Sebastian Simon
– Sebastian Simon, Commented Aug 24, 2021 at 15:41
document.getElementsByTagName("etat").addEventListener("change", hideCheckbox); — esQmo_
– esQmo_, Commented Aug 24, 2021 at 15:42
@akhilrawat001 i did it because when I first wrote <div> 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
– Jasmine, Commented Aug 24, 2021 at 15:42

Subhashis Pandey · Accepted Answer · 2021-08-24 15:44:11Z

2

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

answered Aug 24, 2021 at 15:44

Subhashis Pandey

1,5381 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohsin Ali · Accepted Answer · 2021-08-24 16:04:26Z

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

Anas Nisar · Accepted Answer · 2021-08-24 16:14:28Z

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, 2021 at 16:14

answered Aug 24, 2021 at 16:00

Anas Nisar

1141 silver badge7 bronze badges

1 Comment

Sebastian Simon Over a year ago

The recommended way would be

document.querySelector("select[name='etat']").addEventListener("change", () => document.getElementById("checkbox").style.visibility = "visible");

. Don’t suggest onchange attributes.

akhilrawat001 · Accepted Answer · 2021-08-24 15:49:16Z

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>

Collectives™ on Stack Overflow

How to call a JavaScript function from Select Option with Html

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related