CODEWITHSUNDEEP
javascripthtmlhtml-select
Jasmine
Jasmine

Reputation: 72

How to call a JavaScript function from Select Option with Html

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>

Upvotes: 0

Views: 6097

Answers (4)

Anas Nisar
Anas Nisar

Reputation: 114

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

Upvotes: 1

Mohsin Ali
Mohsin Ali

Reputation: 391

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

Upvotes: 1

akhilrawat001
akhilrawat001

Reputation: 119

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>

Upvotes: 0

Subhashis Pandey
Subhashis Pandey

Reputation: 1538

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

Upvotes: 2

Related Questions