Member Avatar for jonlloydd

I am tring to work out a price with VAT included based on a VAT rate the user enters. I want to display the result in a input box. Can I display the result of this as the user enters the VAT rate and price without clicking a button or resubmitting the form.

I am using this to work out the price with VAT.

<?php
    $taxprice = ($tax * $selling)
?>

$tax is the value of the input box where the user enters the tax rate.
$selling is the value of the input box where the user enters the price.
$taxprice is the value I want displayed in an input box as the user enters the values for the other two fields.

I cant get the sum to work live as the user enters the two values without using a button. Does anybody know how to do this? Thanks Jon :)

  • 3 Contributors
  • 5 Replies
  • 384 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

As hinted, the live update must run in the browser (client-side JavaScript). Server-side PHP can compute the same value, but it cannot update an input box as the user types unless you submit/AJAX back to the server. The likely causes of the blank field in 's attempt are: the script ran before the inputs existed, an input used an invalid type="integer", the code used a mismatched variable name (case matters), and numeric values were treated as strings (no parseFloat), so the math failed or produced NaN.

Fix checklist:

  • Put the script after the inputs or run on DOMContentLoaded / use defer.
  • Use type="number" (with step="0.01" for currency) and give the inputs matching id attributes.
  • Listen for the input event for immediate updates (or blur if you only want finished entries).
  • Parse values with parseFloat (and handle commas if needed) and treat the VAT as a percent (20 -> 20%).
  • Round/display with toFixed(2) and always validate on the server too, as advised.

Example (drop this script after your inputs or use defer):

<script>
document.addEventListener('DOMContentLoaded', function () {
  var vatRateEl = document.getElementById('vatRate');
  var netEl = document.getElementById('netPrice');
  var grossEl = document.getElementById('grossPrice');

  function updateGross() {
    var vat = parseFloat((vatRateEl.value || '').replace(',', '.')) || 0;
    var net = parseFloat((netEl.value || '').replace(',', '.')) || 0;
    var gross = net * (1 + vat / 100);
    grossEl.value = isFinite(gross) ? gross.toFixed(2) : '';
  }

  vatRateEl.addEventListener('input', updateGross);
  netEl.addEventListener('input', updateGross);
  updateGross();
});
</script>

If it still fails, open the browser console for errors, verify the id attributes match exactly, and confirm the script runs after the DOM. This approach gives immediate feedback while preserving server-side checks on submit.

Recommended Answers

All 5 Replies

Member Avatar for Member #120589

This will need to be javascript. You could do an ajaxed php function, but seems pointless. The vat field needs to know if the entry is finished before firing off the calculate function, so as a rule you can use "blur" to make this happen.
Have a go yourself with vanilla js or jQuery - whatever you're using and come back.

Member Avatar for jonlloydd

Yes, I though I would need to use some Javascript, I will have a play and see what I get. Cheers!

Member Avatar for jonlloydd

I have had a go with js. Heres my code -

<script>
var taxInput = document.getElementById('taxValue');
var sellingPriceInput = document.getElementById('sellingPrice');
var taxedPriceInput = document.getElementById('taxedPrice');

taxInput.addEventListener('keyup', calcTaxPrice);
sellingPriceInput.addEventListener('keyup', calcTaxPrice);

function calcTaxPrice() {
    var tax = taxInput.value || 0;
    var sellingPrice = sellingPriceInput.value || 0;

    var taxPrice = sellingPrice * tax;

    taxedPriceInput.value = taxprice;
    }
</script>


<input type="integer" class="form-control" name="TAXPRICE" value="<?php echo $taxprice ?>">

I was hoping this would produce the anwser in my input box however my input box remains blank after I have entered the price and and tax rate. Not really sure where I have gone wrong, if can see where I'd really appreciate your help.

Member Avatar for rubberman

You really don't need javascript to do this! Assuming you have the tax rate and selling price (either GET or POST variables), then you can easily do this in the server-side PHP logic. Then, output to the client browser with HTML is trivial.

Member Avatar for Member #120589

You really don't need javascript to do this! Assuming you have the tax rate and selling price (either GET or POST variables), then you can easily do this in the server-side PHP logic. Then, output to the client browser with HTML is trivial.

But:

Can I display the result of this as the user enters the VAT rate and price without clicking a button or resubmitting the form.
...
I cant get the sum to work live as the user enters the two values without using a button

What's this for:

<input type="integer" class="form-control" name="TAXPRICE" value="<?php echo $taxprice ?>">

Is there an integer type? New on me. Show your form as I'm not convinced you've got it set up right.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.