Tengo un sistema de facturación el cual debe cambiar el precio según el usuario cambie de producto en el select, por ejemplo estoy usando este código javascript pero no está haciendo la función:
<script>
// Obtener elementos del DOM
var select = document.getElementById('product_id');
var input = document.getElementById('sub_total');
// Función para actualizar el valor del input
function actualizarInput() {
if (select.value == "{{ product[0]['id'] }}") {
input.value = "{{ product[0]['price'] }}";
} else if (select.value == "{{ product[1]['id'] }}") {
input.value = "{{ product[1]['price'] }}";
} else if (select.value == "{{ product[2]['id'] }}") {
input.value = "{{ product[2]['price'] }}";
} else {
input.value = "";
}
}
// Agregar evento onchange al select
select.addEventListener('change', actualizarInput);
</script>
Estas son las propiedades del select e input correspondientes:
<input type="number" name="sub_total" class="form-control" id="sub_total" value="{{ product[0]['price'] }}">
<select name="product_id" id="product_id" class="form-control js-example-basic-single">
<option value="" disabled selected></option>
{% for product in product%}
<option value="{{product['id']}}">{{product['description']}} | {{product ['type'] }}
</option>
{% endfor %}
</select>