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.