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>
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>
-
extra space in
< div>– akhilrawat001 Commented Aug 24, 2021 at 15:38 -
1
Where is
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. – Sebastian Simon Commented Aug 24, 2021 at 15:40 -
Inline event handlers like
onclickare not remended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always useaddEventListenerinstead. – Sebastian Simon Commented Aug 24, 2021 at 15:41 -
document.getElementsByTagName("etat").addEventListener("change", hideCheckbox);– 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 Commented Aug 24, 2021 at 15:42
4 Answers
Reset to default 2You 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";
}
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";
}
}
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";
}
I have created a fiddle. https://jsfiddle/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>