Putting a Php Variable in Javascript function and add to a select field value to it to output an answer with javascript

Question

I am developing a shopping cart and have been able to output the total value of the items in the cart in a Php variable I call $total which I tried to put in a javascript variable I called Shipping fee, I now developed a form where I put a "select field" drop down, that I was able to output its value using a javascript function I called example I know wanted to sum the values of the javascript Variables I have created and do some mathematical operations like add e-payment procesing fess and display the grand total value via a function I call tstfunction, but the grand total value is not displaying. my main challenge is with the tstfunction and the code I did is shown below

<form method="post" action="checkout.php" name="form">  
                  <h4>Cart Totals</h4>
                  <table class="table table-bordered">
                    <tbody>
                      <tr>
                        <td>Cart Subtotal</td>
                        <td><?php echo number_format($total, 2); ?>&nbsp;&nbsp;Naira</td>
                      </tr>
                      <tr>
                        <td>Shipping and Handling</td>
                        <td><span class="style10">
                        
                          <select name="nameSelect" onChange="example(); tstfunction()" id="nameSelect" class="formstyle">
                            &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                            <option>Please select shipping Location</option>
                            <option value="000">Pick up in OGS Secretariat --N0.00</option>
                            <option value="3000">Within Lagos State--N3,000</option>
                            <option value="10000">Outside Lagos (withinNigeria) --N10,000</option>
                            <option value="35000">Outside Nigeria--N35,000</option>
                            &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;
                          </select>
                          <div Your shipping amountis id="display"></div>
<script> function example(){    
  var e = document.getElementById("nameSelect");
  var dspValue = e.options[e.selectedIndex].value;
    document.getElementById('display').innerHTML = dspValue;
}

// get the currently selected value from the dropdown
var value = $('#nameselect').val();
$.post(url, { contentVar: cv, selectedValue: value }, function(data) {
    $("#myDiv").html(data).show();
});
</script> </span></td>

<script>
function tstfunction(){
        Var SubTotal = <?php echo $total; ?>;
var f = document.getElementById("nameSelect");
  var shippingfee = f.options[f.selectedIndex].value;    
    var sum2 = parseInt(shippingfee) + parseInt(SubTotal);
                var sum3 = parseInt(sum2) * 0.015;
        var sum = parseInt(shippingfee)+ parseInt(SubTotal) + parseInt(sum3) + 100;
        
   document.getElementById("regtotal").innerHTML = sum;
        document.getElementById("regtotalinput").value = sum;
    }
</script>

<script language=javascript>
/*******************
obj: the ID of the field you want to change
val: the value you want to change it to
*******************/
function changeValue(regtotalinput,sum)
{
 obj.value = val;
}
</script>

                      </tr>
                      <tr>
                        <td>Order Total + 1.5% of total fees + N100</td>
                        
                        <td><div id="regtotal"></div></td>
                        <input name="regtotalinput" type="hidden" id="regtotalinput" value="" > 
                      </tr>
                    </tbody>
                  </table>
                  <a class="btn btn-default">Proceed to Checkout</a></div>
                  </form>

any help on tstfunction part will be greatly appreciated

I tried to to create a javascript variable from the php variable I have created and I tried to sum it with thevalue of a dropdown field

Answer 1

first, you need to wraping functions 'example' and 'tstfunction'.

function selectedHandler() {
    example()
    tstfunction()
}

then function 'selectedHandler' put to onChange select tag.

<select name="nameSelect" onChange="selectedHandler()" id="nameSelect" class="formstyle"> ... </select>

hope it's help. Thanks