Блог

Я хочу сделать автоматический ввод с помощью selectpicker, а затем вычислить эту форму, но мой приведенный ниже код не является автоматическим вводом, за исключением того, что я сначала нажимаю форму ввода, вычисляет javascript, но я хочу, чтобы входная цена автоматически имела значение при выборе пакета и поездки, не нажимая сначала форму ввода.

извините за мою плохую грамматику английского языка, и я только начал изучать программирование. спасибо, это мой код ниже :

HTML

 <label>Package</label>
<select  onblur="findTotal()" class="selectpicker" id="package">
  <option value="" disabled selected>Select package...</option>
  <option value="Engagement">Engagement</option>
  <option value="Wedding">Wedding</option>
  <option value="Other">Other</option>
</select>

<br/>

<label>Trip</label>
<select  onblur="findTotal()" class="selectpicker" id="trip">
  <option value="" disabled selected>Select trip...</option>
  <option value="shorttrip">Short Trip</option>
  <option value="longttrip">Long Trip</option>
</select>

<br/><br/>

<label>Package Price</label>
<input onblur="findTotal()" type="text" name="qty" id="packageprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Trip Price</label>
<input onblur="findTotal()" type="text" name="qty" id="tripprice" placeholder="autoinput by selectpicker" />
<br/>
<label>Tip</label>
<input onblur="findTotal()" type="text" name="qty" placeholder="manual input"  />


<br/><br/>
<label>Total Price</label>
<input type="text" name="result" id="total" />

 

JAVASCRIPT

 function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    var paket = document.getElementById('package').value;
    var trp = document.getElementById('trip').value;
    
    for(var i=0;i<arr.length;i  ){
        if(parseInt(arr[i].value))
            tot  = parseInt(arr[i].value);
    }
    
    if (paket == "Engagement") {
        document.getElementById('packageprice').value = "1000";
    } else if (paket == "Wedding") {
      document.getElementById('packageprice').value = "2000";
    } else {
      document.getElementById('packageprice').value = "0";
    }
    
    if (trp == "shorttrip") {
        document.getElementById('tripprice').value = "3000";
    } else if (trp == "longttrip") {
      document.getElementById('tripprice').value = "4000";
    } else {
      document.getElementById('tripprice').value = "0";
    }
    
    document.getElementById('total').value = tot;
}
 

или вы можете просмотреть код на JS Fiddle здесь: http://jsfiddle.net/ryh7vpwa/5 /

Вы должны использовать oninput вместо onblur для элементов, реализующих функцию findTotal

 <select  oninput="findTotal()" class="selectpicker" id="package">
  <option value="" disabled selected>Select package...</option>
  <option value="Engagement">Engagement</option>
  <option value="Wedding">Wedding</option>
  <option value="Other">Other</option>
</select>

<br/>

<label>Trip</label>
<select  oninput="findTotal()" class="selectpicker" id="trip">
  <option value="" disabled selected>Select trip...</option>
  <option value="shorttrip">Short Trip</option>
  <option value="longttrip">Long Trip</option>
</select>