i have a select where when i choose the option periodica a div change to display block, the problem is when i want to use the value "Periodica" with uppercase P the js just dont work anymore.
i know i can just send the value periodica but i need to store this value as Periodica
function showDiv(divId, element) {
document.getElementById(divId).style.display = element.value == "periodica" ? 'block' : 'none';
}
#hidden_div {
display: none;
}
<select required name="tdonacion" class="form-control form-group col-md-12" onchange="showDiv('hidden_div', this)">
<option value="Puntual">Puntual</option>
<option value="periodica">Periódica</option>
</select>
<div id="hidden_div">
<select required name="dperiodica" class="form-control form-group col-md-12">
<option value="Mensual">Mensual</option>
<option value="Trimestral">Trimestral</option>
<option value="Semestral">Semestral</option>
<option value="Anual">Anual</option>
</select>
</div>
Js is case sensitive. You can test element.value == "Periodica" or use toLowerCase()
if("periodica" == "Periodica"){
console.log("Js isn't case sensitive")
}else{
console.log("Js is case sensitive")
}
let text = "Periodica";
if(text.toLowerCase() == "periodica"){
console.log("works")
}
console.log(text + " didn't change");
Try this:
JavaScript:
function showDiv(divId, element){
document.getElementById(divId).style.display = element.value == "Periodica" ? 'block' : 'none';}
HTML:
<select required name="tdonacion" class="form-control form-group col-md-12" onchange="showDiv('hidden_div', this)">
<option value="Puntual">Puntual</option>
<option value="Periodica">Periódica</option>
</select>
You can use toLocaleLowerCase() method.
my suggestion:
function showDiv(divId, element){
document.getElementById(divId).style.display = element.value.toLocaleLowerCase() == "periodica" ? 'block' : 'none';}
hope it will work for you.