
Error al leer la propiedad value de un control tipo select
Publicado por Roberto (1 intervención) el 17/11/2022 19:30:00
Hola, del lado del cliente tengo un formularios con dos controles de tipo select y un input
<form action="cotiza_serv1.php" method="post" enctype="multipart/form-data" name="frmCotiza" id="frmCotiza">
<p><h2>Seleccione el servicio a cotizar</h2></p>
<p><strong>El cotizador muestra solo el precio de la mano de obra por el servicio a solicitar sin IVA y no incluye material.</strong></p>
<div class="control-group">
<select class="form-control-select" id="rubros_l" name="rubros_l" required>
<option value="0">-- Seleccione --</option>
<option value="1">Pintura</option>
<option value="plomeria">Plomeria</option>
<option value="electricidad">Electricidad</option>
<option value="impermeabilizacion">Impermeabilización</option>
<option value="tabla roca">Tabla roca</option>
<option value="aire condicionado">Aire acondicionado</option>
<option value="carpinteria">Carpinteria</option>
<option value="herreria">Herreria</option>
</select>
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<select class="form-control-select" id="rubros_2" name="rubros_2" required>
<option value="0">-- Seleccione --</option>
<option value="1">Superficie lisa</option>
<option value="2">Superficie lisa con resanes pequeños</option>
<option value="3">Superficie porosa con acabados</option>
</select>
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<input type="text" class="form-control p-4" id="inputCantidad" name="inputCantidad" placeholder="Escriba la cantidad de metros cuadrados a pintar" required="required" data-validation-required-message="Ingrese la cantidad" maxlength="30" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<div class="result" id="result"></div>
<p class="help-block text-danger"></p>
</div>
<div>
<button class="btn btn-primary py-3 px-5" type="submit" id="btnCotiza" name="btnCotiza">Cotizar</button>
</div>
</form>
En el siguiente script tengo una funcion para calcular unos servicios
El error es que no puede leer la propiedad value de mi control select
cotiza.php:282 Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLFormElement.calcularServicios if(servicios.value == "1"){
<script>
function calcularServicios(e){
e.preventDefault();
const {cantidad} = getValues();
var servicios = document.getElementById('rubros_1');
var select = document.getElementById('rubros_2');
if(servicios.value == "1"){
if(select.value == "1"){
let resPintura = parseInt(cantidad) * 45;
UI(resPintura)
}else if (select.value == "2"){
let resPintura = parseInt(cantidad) * 65;
UI(resPintura)
}else if (select.value == "3"){
let resPintura = parseInt(cantidad) * 80;
UI(resPintura)
}
}
}
</script>
<form action="cotiza_serv1.php" method="post" enctype="multipart/form-data" name="frmCotiza" id="frmCotiza">
<p><h2>Seleccione el servicio a cotizar</h2></p>
<p><strong>El cotizador muestra solo el precio de la mano de obra por el servicio a solicitar sin IVA y no incluye material.</strong></p>
<div class="control-group">
<select class="form-control-select" id="rubros_l" name="rubros_l" required>
<option value="0">-- Seleccione --</option>
<option value="1">Pintura</option>
<option value="plomeria">Plomeria</option>
<option value="electricidad">Electricidad</option>
<option value="impermeabilizacion">Impermeabilización</option>
<option value="tabla roca">Tabla roca</option>
<option value="aire condicionado">Aire acondicionado</option>
<option value="carpinteria">Carpinteria</option>
<option value="herreria">Herreria</option>
</select>
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<select class="form-control-select" id="rubros_2" name="rubros_2" required>
<option value="0">-- Seleccione --</option>
<option value="1">Superficie lisa</option>
<option value="2">Superficie lisa con resanes pequeños</option>
<option value="3">Superficie porosa con acabados</option>
</select>
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<input type="text" class="form-control p-4" id="inputCantidad" name="inputCantidad" placeholder="Escriba la cantidad de metros cuadrados a pintar" required="required" data-validation-required-message="Ingrese la cantidad" maxlength="30" />
<p class="help-block text-danger"></p>
</div>
<div class="control-group">
<div class="result" id="result"></div>
<p class="help-block text-danger"></p>
</div>
<div>
<button class="btn btn-primary py-3 px-5" type="submit" id="btnCotiza" name="btnCotiza">Cotizar</button>
</div>
</form>
En el siguiente script tengo una funcion para calcular unos servicios
El error es que no puede leer la propiedad value de mi control select
cotiza.php:282 Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLFormElement.calcularServicios if(servicios.value == "1"){
<script>
function calcularServicios(e){
e.preventDefault();
const {cantidad} = getValues();
var servicios = document.getElementById('rubros_1');
var select = document.getElementById('rubros_2');
if(servicios.value == "1"){
if(select.value == "1"){
let resPintura = parseInt(cantidad) * 45;
UI(resPintura)
}else if (select.value == "2"){
let resPintura = parseInt(cantidad) * 65;
UI(resPintura)
}else if (select.value == "3"){
let resPintura = parseInt(cantidad) * 80;
UI(resPintura)
}
}
}
</script>
Valora esta pregunta


0