Populating a calculated value into another form

Question

I have a small form that calculates a shipping cost, which is all working fine. I want the user to click Book Now and the fields are then populated.

All the fields have been populated correctly, its just the cost calculation doesn't populate on the form.

This is my code for calculting the cost

var values = [
        [20,25,35,40],
        [36,42,50,56],
        [42,56,52,68],
        [60,70,68,72],
    ];    

function updateValue() {
        var fromCountry = document.querySelector('input[name="from_country"]:checked').value;
        var toCountry = document.querySelector('input[name="to_country"]:checked').value;


        var totalValues = values[fromCountry-1][toCountry-1];
        var quantity = document.querySelector('select[name="number"]');
        var x = parseInt(quantity.value, 10);

        if(fromCountry && toCountry) {
            document.getElementById('cost').value = (totalValues * x);
        }
    }

This is the html

<input type="text" id="cost" name="cost" value="0" disabled="disabled" />

Then the other form looks like this:

<label for="cost">Estimated cost</label>
<input type="text" id="cost" name="cost" value="<?php echo $_POST['cost'];?>">

All the other fields populate fine but the cost one doesn't for some reason.

Answer 1

I believe if a text input is disabled its contents are not actually POSTed in the submission. Add a hidden input and populate it with the value and it should be sent in the request.

On the other hand, there is no reason why you cannot perform the same calculation on the server side using the values you do have. There is nothing stopping a savvy user from editing the "cost" on your page to give themself a nice discount.