Performing a System with PHP and JavaScript I am in the following problematic:
I have a select
with an event onChange
so depending on what I selected, I can enable or disable some fields, but the problem is that changing the value of select
throws me the following error in console:
TypeError: inputCalle is null
My form code:
<label>Domicilio si es distinto al del alumno(a):</label><br>
<select class="select" name="domicilio" onchange="habilitarDomicilio(this);">
<option value=""></option>
<option value="si">Si</option>
<option value="no">No</option>
</select><br>
<label>Calle:</label><br>
<input class="in-inp" type="text" name="calle" id="calle" disabled></input><br>
<label>Número:</label><br>
<input class="in-inp" type="text" name="numero" id="numero" maxlength="5" disabled></input><br>
<label>Colonia:</label><br>
<input class="in-inp" type="text" name="colonia" id="colonia" maxlength="40" disabled></input><br>
<label>Código Postal:</label><br>
<input class="in-inp" type="number" name="cp" id="cp" min="5" max="5" disabled></input><br>
<label>Municipio:</label><br>
<input class="in-inp" type="text" name="municipio" id="municipio" maxlength="50" disabled></input><br>
<label>Estado:</label><br>
<input class="in-inp" type="text" name="estado" id="estado" maxlength="35" disabled></input><br>
JavaScript Code:
var inputCalle = document.getElementById("calle");
var inputNumero = document.getElementById('numero');
var inputColonia = document.getElementById('colonia');
var inputCP = document.getElementById('cp');
var inputMunicipio = document.getElementById('municipio');
var inputEstado = document.getElementById('estado');
function habilitarDomicilio(elemento) {
d = elemento.value;
if(d == "si"){
inputCalle.disabled = false;
inputCalle.required = true;
inputNumero.disabled = false;
inputNumero.required = true;
inputColonia.disabled = false;
inputColonia.required = true;
inputCP.disabled = false;
inputCP.required = true;
inputMunicipio.disabled = false;
inputMunicipio.required = true;
inputEstado.disabled = false;
inputEstado.required = true;
}else{
inputCalle.disabled = true;
inputCalle.value = "";
inputCalle.required = false;
inputNumero.disabled = true;
inputNumero.value = "";
inputNumero.required = false;
inputColonia.disabled = true;
inputColonia.value = "";
inputColonia.required = false;
inputCP.disabled = true;
inputCP.value = "";
inputCP.required = false;
inputMunicipio.disabled = true;
inputMunicipio.value = "";
inputMunicipio.required = false;
inputEstado.disabled = true;
inputEstado.value = "";
inputEstado.required = false;
}
}
I already tried changing the id's of the elements but I keep throwing the same error, just as I have other methods that do the same and if they work. What is the error?