0

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>
0

1 respuesta 1

1

Puede que el error se deba a que estas pisando la variable product cuando haces {% for product in product%}

Independientemente de eso, tu código Javascript se puede simplificar si:

  • Al generar el listado de <option> agregas un atributo data para guardar el precio.

    {% for p in product%}
    <option data-price="{{p['price']}}" ...
    
  • Al cambiar el <select> recuperamos, del <option> seleccionado, el precio del producto.

    function actualizarInput() {
      let option = select.selectedOptions[0];
      input.value = option.dataset.price || '';
    }
    

Ejemplo:

Tu Javascript:

// 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() {
  let option = select.selectedOptions[0];
  input.value = option.dataset.price || '';
}
// Agregar evento onchange al select
select.addEventListener('change', actualizarInput);

Tu HTML:

<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 p in product%}
  <option value="{{p['id']}}" data-price="{{p['price']}}">{{p['description']}} | {{p['type'] }}
  </option>
  {% endfor %}
</select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.