Using jquery to show total price in form

Question

What I am trying to do is add the price when user selects an option from a drop down in form..

The from submits data to the database as well so the fields have values assigned as "selfpickup" and "delivery"..

What I want is to assign price to the selected value, add them and show the total inside the form..

Code inside the form:

<select name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected value="SimpleMug">Simple Mug</option>
    <option value="Magic Mug">Magic Mug</option>
  </select>

<select name="delive" class="custom-select col-md-7">
    <option selected value="SelfPickup">Self Pickup</option>
    <option value="delivery">Deliver it to me</option>
  </select>

jquery needed:

If SimpleMug is selected assign a price of 300 to a variable and add to total.

If MagicMug is selected assign a price of 400 to a variable and add to total.

If SelfPickup is selected assign a price of +0 to a variable and add to total.

If Delivery is selected assign a price of +100 to a variable and add to total.

I don't know any jquery hence this question,any help would be appreciated.

EDIT:

I did got this far to get the values and then show their respective charges.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Umy Raff</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("select#mugtype").change(function(){
        var mugType = $(this).children("option:selected").val();
        if (mugType === "MagicMug" ) {
            var mug = 400;
        }else if (mugType === "SimpleMug") {
            var mug = 300;
        }    

        $("#result").html(mugType + ' = ' + mug + '.pkr');  
    });

    $("select#delive").change(function(){
        var method = $(this).children("option:selected").val();
        if (method === "SelfPickup" ) {
            var charges = 0;
        }else if (method === "TCS") {
            var charges = 100;
        }   
        $("#results").html(method +' Charges = ' + charges  + '.pkr');   
    });

});
</script>
</head> 
<body>
    <form>
        <select id="mugtype" name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected >Select a Mug</option>
    <option value="SimpleMug">Simple Mug</option>
    <option value="MagicMug">Magic Mug</option>
  </select>
<br>
<select id="delive" name="delive" class="custom-select col-md-7">
    <option selected >Please select a method</option>
    <option value="SelfPickup">Self Pickup</option>
    <option value="TCS">Deliver it to me</option>

  </select>
    </form>
    <p id="result" >Mug Type</p>
    <p id="results" >Delivery Charges</p>

</body>
</html>

new when I try adding the values to show the result there is nothing there..

var total = mug + charges;

is not working for me.

I have no idea of jquery, tried and failed miserably, so there is no jquery.. — Umy Raff, Mar 10 '20 at 07:55

score 0 · Answer 1 · answered Mar 20 '20 at 09:41

Somehow i was able to do it.

js:

<script>
$(document).ready(function(){
    var fullCharges = 0;
    $("select#mugtype").change(function(){
        var mugType = $(this).children("option:selected").val();
        if (mugType === "MagicMug" ) {
            var mug = 400;
            fullCharges = mug;
        }else if (mugType === "SimpleMug") {
            var mug = 300;
            fullCharges = mug;
        }    

        $("#mCharges").html(mugType + ' = ' + fullCharges + '.pkr');  
    });

    $("select#delive").change(function(){
         method = $(this).children("option:selected").val();
        if (method === "SelfPickup" ) {
             charges = 0;
             $("#dCharges").html(method +' Charges = ' + charges  + '.pkr'); 
        }else if (method === "TCS") {
             charges = 100;
           total =  fullCharges + charges;

           $("#dCharges").html(method +' Charges = ' + charges  + '.pkr'); 
        }   

    });

    $(".et").click(function () {
        $("#total").html(total  + '.pkr'); 
     });


});
</script>

Form:

<form>
        <select id="mugtype" name="mugtype" class="custom-select col-md-7 mb-3">
    <option selected >Select a Mug</option>
    <option value="SimpleMug">Simple Mug</option>
    <option value="MagicMug">Magic Mug</option>
  </select>
<br>
<select id="delive" name="delive" class="custom-select col-md-7">
    <option selected >Please select a method</option>
    <option value="SelfPickup">Self Pickup</option>
    <option value="TCS">Deliver it to me</option>

  </select>
    </form>

    <br>
    <i>Mug Charges: </i><i id="mCharges" >Mug Type</i><br>
    <i>Delivery Charges: </i><i id="dCharges" >Delivery or Pickup</i><br>
    <input class="et" type="button" value="Total Charges: "/><i id="total" >Total</i>

Using jquery to show total price in form

1 Answers1