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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var taxv = $("#taxvalue option:selected").val();
$('.brutto').bind('change keydown keyup',function (){
$('input.netto').val(($(this).val()/(1+parseFloat(taxv))).toFixed(2));
});
$('.brutto').bind('change keydown keyup',function (){
$('input.vat').val(($(this).val()*parseFloat(taxv)/(1+parseFloat(taxv))).toFixed(2));
});
$('.netto').bind('change keydown keyup',function (){
$('input.vat').val(($(this).val()*parseFloat(taxv)).toFixed(2));
});
$('.netto').bind('change keydown keyup',function (){
$('input.brutto').val(($(this).val()*(1+parseFloat(taxv))).toFixed(2));
});
//-->
</script>
<ul class="ul-cleared" style="display: table;margin: auto;">
<li>
<label class="large hightlight quarter" for="number">Numer faktury</label>
<input class="large" type="text" id="number" name="number" style="width: 299px" />
</li>
<li>
<label class="large hightlight quarter" for="taxvalue">Stawka podatkowa</label>
<select class="large" id="taxvalue" name="taxvalue" style="width: 299px">
<option value="0.23">23%</option>
<option value="0.08">8%</option>
</select>
</li>
<li>
<label class="large hightlight quarter" for="netto">Wartość netto</label>
<input class="large netto" type="text" id="netto" name="netto" style="width: 299px" />
</li>
<li>
<label class="large hightlight quarter" for="vat">VAT</label>
<input class="large vat" type="text" id="vat" name="vat" style="width: 299px" />
</li>
<li>
<label class="large hightlight quarter" for="brutto">Kwota brutto</label>
<input class="large brutto" type="text" id="brutto" name="brutto" style="width: 299px" />
</li>
</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
var taxv = $("#taxvalue option:selected").val();
do każdej z funkcji.
----- Prawidłowy kod JavaScript: -----
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$('.brutto').bind('change keydown keyup',function (){
var taxv = $("#taxvalue :selected").val();
$('input.netto').val(($(this).val()/(1+parseFloat(taxv))).toFixed(2));
});
$('.brutto').bind('change keydown keyup',function (){
var taxv = $("#taxvalue :selected").val();
$('input.vat').val(($(this).val()*parseFloat(taxv)/(1+parseFloat(taxv))).toFixed(2));
});
$('.netto').bind('change keydown keyup',function (){
var taxv = $("#taxvalue :selected").val();
$('input.vat').val(($(this).val()*parseFloat(taxv)).toFixed(2));
});
$('.netto').bind('change keydown keyup',function (){
var taxv = $("#taxvalue :selected").val();
$('input.brutto').val(($(this).val()*(1+parseFloat(taxv))).toFixed(2));
});
//-->
</script>
Zgroza.