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>
4 Answers 4
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";
}
Comments
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";
}
}
Comments
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";
}
1 Comment
document.querySelector("select[name='etat']").addEventListener("change", () => document.getElementById("checkbox").style.visibility = "visible");. Don’t suggest onchange attributes.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>
< div>hidecheckboxused? 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) (hitF12) and read any errors. The dev tools provide an Inspector / Elements. Use it to your advantage. Please validate your HTML.onclickare not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always useaddEventListenerinstead.document.getElementsByTagName("etat").addEventListener("change", hideCheckbox);<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