Poniższy skrypt umożliwia nadawanie na żywo wartości polom input (typu text) 'brutto', 'vat' lub 'netto' w zależności od tego, co wprowadzimy do jednego z pól 'brutto' lub 'netto'.

I tak, jeśli w polu netto wpiszemy 100, to w polu vat wskoczy wartość 8.00, a do pola brutto 108.00. Identycznie jest w drugą stronę. Jesli wpiszemy do pola netto 216, to w polu vat pojawi się wartość 16.00, a w polu brutto 200.00 (skrypt służy to wyliczania kwoty stawki podatkowej oraz kwot netto i brutto w zależności od tego co wpiszemy).

Problem polega na tym, że wymagane jest, aby w poniższym kodzie [jquery] wartość taxv zmieniała się na żywo przy zmianie opcji w polu SELECT.

Jeśli w polu SELECT wybrana jest opcja 8% (wartość 0.08), kwoty podatku oraz kwoty netto i brutto powinny być od tego momentu wyliczana na podstawie tej wybranej opcji - czyli wybieram 8% to przy wpisywaniu do pól 'netto' i 'brutto' ma obliczać te kwoty opierając się na podatku 8% - jeśli wybiorę 23%, to na podatku 23%.

Poniższa wersja ma ten problem, że po wczytaniu formularza oblicza wszystkie kwoty na podstawie wybranego pola, które wybrane jest po wczytaniu się strony (8%), a gdy zmienię na drugie (23%). kwoty wciąż obliczane są na podstawie tego, który był wybrany po wczytaniu, a powinny już teraz być wyliczane na podstawie nowo wybranego.

Nie wiem kompletnie co mam zrobić, aby za każdym razem kwoty były obliczane według wybranej na żywo opcji z pola SELECT.

Macie jakieś pomysły? Próbowałem różnych podpowiedzi znalezionych w necie, jednak w żaden sposób nie potrafię tego co proponują na stronach połączyć ze swoim skryptem tak, aby wszystko działało.

Zakładam, że problem polega, że zawartość taxv z kodu [jquery] wczytuje się tylko raz podczas załadowania się strony, a potem zostaje statyczna i nic jej nie może ruszyć by się zmieniła.

Jestem laikiem w jquery, więc byłbym wdzięczny za jak najbardziej proste i przychylne mi wskazanie rozwiązania.

Z góry dzięki za pomoc.

[JAVASCRIPT] pobierz, plaintext
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. var taxv = $("#taxvalue option:selected").val();
  4.  
  5. $('.brutto').bind('change keydown keyup',function (){
  6. $('input.netto').val(($(this).val()/(1+parseFloat(taxv))).toFixed(2));
  7. });
  8. $('.brutto').bind('change keydown keyup',function (){
  9. $('input.vat').val(($(this).val()*parseFloat(taxv)/(1+parseFloat(taxv))).toFixed(2));
  10. });
  11. $('.netto').bind('change keydown keyup',function (){
  12. $('input.vat').val(($(this).val()*parseFloat(taxv)).toFixed(2));
  13. });
  14. $('.netto').bind('change keydown keyup',function (){
  15. $('input.brutto').val(($(this).val()*(1+parseFloat(taxv))).toFixed(2));
  16. });
  17. //-->
  18. </script>
[JAVASCRIPT] pobierz, plaintext


  1. <ul class="ul-cleared" style="display: table;margin: auto;">
  2. <li>
  3. <label class="large hightlight quarter" for="number">Numer faktury</label>
  4. <input class="large" type="text" id="number" name="number" style="width: 299px" />
  5. </li>
  6. <li>
  7. <label class="large hightlight quarter" for="taxvalue">Stawka podatkowa</label>
  8. <select class="large" id="taxvalue" name="taxvalue" style="width: 299px">
  9. <option value="0.23">23%</option>
  10. <option value="0.08">8%</option>
  11. </select>
  12. </li>
  13. <li>
  14. <label class="large hightlight quarter" for="netto">Wartość netto</label>
  15. <input class="large netto" type="text" id="netto" name="netto" style="width: 299px" />
  16. </li>
  17. <li>
  18. <label class="large hightlight quarter" for="vat">VAT</label>
  19. <input class="large vat" type="text" id="vat" name="vat" style="width: 299px" />
  20. </li>
  21. <li>
  22. <label class="large hightlight quarter" for="brutto">Kwota brutto</label>
  23. <input class="large brutto" type="text" id="brutto" name="brutto" style="width: 299px" />
  24. </li>
  25. </ul>


ROZWIĄZANIE:

Nie wiem dlaczego wpadłem na to rozwiązanie tak późno. Może dlatego, że umysł przemęczony i potrzebuje odpoczynku. Nie potrafię sobie tego inaczej wytłumaczyć. Po prostu nie wiem jak mogłem być taki "gupek" - aż wstyd.

Wystarczyło przenieść kod
[JAVASCRIPT] pobierz, plaintext
  1. var taxv = $("#taxvalue option:selected").val();
[JAVASCRIPT] pobierz, plaintext

do każdej z funkcji.

Prawidłowy kod java script:

[JAVASCRIPT] pobierz, plaintext
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. <!--
  4. $('.brutto').bind('change keydown keyup',function (){
  5. var taxv = $("#taxvalue :selected").val();
  6. $('input.netto').val(($(this).val()/(1+parseFloat(taxv))).toFixed(2));
  7. });
  8.  
  9. $('.brutto').bind('change keydown keyup',function (){
  10. var taxv = $("#taxvalue :selected").val();
  11. $('input.vat').val(($(this).val()*parseFloat(taxv)/(1+parseFloat(taxv))).toFixed(2));
  12. });
  13. $('.netto').bind('change keydown keyup',function (){
  14. var taxv = $("#taxvalue :selected").val();
  15. $('input.vat').val(($(this).val()*parseFloat(taxv)).toFixed(2));
  16. });
  17. $('.netto').bind('change keydown keyup',function (){
  18. var taxv = $("#taxvalue :selected").val();
  19. $('input.brutto').val(($(this).val()*(1+parseFloat(taxv))).toFixed(2));
  20. });
  21. //-->
  22. </script>
[JAVASCRIPT] pobierz, plaintext


Zgroza.