Использование jquery для отображения общей цены в форме - PullRequest
3 голосов
/ 10 марта 2020

То, что я пытаюсь сделать, это добавить цену, когда пользователь выбирает вариант из выпадающего списка в форме.

Параметр from также отправляет данные в базу данных, поэтому в полях есть значения, назначенные как «самовывоз». "and" delivery "..

Я хочу назначить цену выбранному значению, добавить их и показать сумму внутри формы ..

Код внутри формы:

<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 необходимо:

Если выбран SimpleMug, назначить цену 300 и добавить к общей.

Если выбран MagicMug, назначить цену 400 переменная и добавьте к итогу.

Если выбран SelfPickup, присвойте переменной значение +0 и добавьте к итогу.

Если выбран вариант Delivery, присвойте переменной значение +100. и добавить к общему.

Я не знаю jquery, поэтому этот вопрос, любая помощь будет оценена.

РЕДАКТИРОВАТЬ:

Я получил это далеко, чтобы получить значения и затем показать их соответствующие расходы.

<!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, когда я пытаюсь добавить значения, чтобы показать результат там ничего нет ..

var total = mug + charges;

у меня не работает.

1 Ответ

0 голосов
/ 20 марта 2020

Каким-то образом я смог это сделать.

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>
        <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...