Saya ingin ketika pengguna mengklik tombol Kirim Pesanan, kotak peringatan berisi kata-kata dan juga harga total dari ukuran dan topping yang dipilih muncul, kemudian memiliki tombol ok sehingga akan menutup tombol peringatan. Saya perlu menggunakan JavaScript untuk menghitung harga total pizza jika pengguna memilih tombol radio dan kotak centang. Tapi aku tidak benar-benar tahu bagaimana melakukannya. Ada yang bisa bantu saya . Btw untuk masalah ini saya hanya menggunakan JavaScript dan html saja

Ini adalah beberapa kode yang sudah saya kembangkan menggunakan html dan javascript

<form>
<p><b>Step 2 : Select the size of pizza you want:</b></p>
        <input type="radio" name="size" value="small" id="radOne">Small
        <input type="radio" name="size" value="medium" id="radTwo">Medium
        <input type="radio" name="size" value="large" id="radThree">Large
        <br>

        <p><b>Step 3 : Select the pizza toppings you want:</b></p>
        <input type="checkbox" name="topping" value="peperoni">Pepperoni
        <input type="checkbox" name="topping" value="Sausage">Sausage
        <input type="checkbox" name="topping" value="Mushrooms">Mushrooms<br>
        <input type="checkbox" name="topping" value="Pineapple">Pineapple
        <input type="checkbox" name="topping" value="Black Olives">Black Olives
        <input type="checkbox" name="topping" value="Meatball">Meatball <br>

        <br>    
        <input type="button" onclick="submit()" value="Submit Order">
        <input type="button" onclick="reset()"  value="Clear Entries">
   </form>
<script>
    function submit() {
        document.getElementById("frm1").submit();
        var radOne = document.getElementById("radOne");
        var radTwo = document.getElementById("radTwo");
        var radThree = document.getElementById("radThree");
        var price;

        if (radOne.checked){
            price = 15.00;}
        else if (radTwo.checked){
            price = 20.00;}
        else
            price = 25.00;
        {alert("MY PIZZA CAFE");}

    }

    function reset() {
    document.getElementById("frm1").reset();
    }

    </script>
0
Nisha 21 Oktober 2019, 05:02

3 jawaban

Jawaban Terbaik

Anda berada di jalur yang benar, hanya saja fungsi submit() memicu pengiriman formulir yang melakukan pengalihan. Periksa kode di bawah ini untuk sosis dan pepperoni dan lakukan hal yang sama untuk kotak centang lainnya.

function calculate(e) {
  var radOne = document.getElementById("radOne");
  var radTwo = document.getElementById("radTwo");
  var radThree = document.getElementById("radThree");
  var pepperoni = document.getElementById("pepperoni");
  var sausage = document.getElementById("sausage");
  var price;

  if (radOne.checked) {
    price = 15.00;
    alert("Small checked");
  }
  if (radTwo.checked) {
    price = 20.00;
    alert("Medium checked");
  }
  if (radThree.checked) {
    price = 25.00;
  }

  if (pepperoni.checked) {
    alert("Pepperoni checked");
    price += 1.5;
  }
  if (sausage.checked) {
    alert("Sausage checked");
    price += 2;
  }

  if (confirm("Your Pizza is " + "Total Price is " + price)) {
    alert("Ok");
  } else {
    alert("Cancelled");
  }
}

function reset(e) {
  document.getElementById("frm1").reset();
}
<html>

<body>
  <form>
    <p><b>Step 2 : Select the size of pizza you want:</b></p>
    <input type="radio" name="size" value="small" id="radOne">Small
    <input type="radio" name="size" value="medium" id="radTwo">Medium
    <input type="radio" name="size" value="large" id="radThree">Large
    <br>

    <p><b>Step 3 : Select the pizza toppings you want:</b></p>
    <input id="pepperoni" type="checkbox" name="topping" value="peperoni">Pepperoni
    <input id="sausage" type="checkbox" name="topping" value="Sausage">Sausage
    <input type="checkbox" name="topping" value="Mushrooms">Mushrooms<br>
    <input type="checkbox" name="topping" value="Pineapple">Pineapple
    <input type="checkbox" name="topping" value="Black Olives">Black Olives
    <input type="checkbox" name="topping" value="Meatball">Meatball <br>

    <br>

    <input type="button" onclick="calculate(this)" value="Submit" />
    <input type="button" onclick="reset(this)" value="Clear Entries" />
  </form>

</body>

</html>
0
Jerdine Sabio 21 Oktober 2019, 03:29

Seseorang telah menjawab pertanyaan Anda. Tapi inilah solusi saya. Anda dapat merujuknya. Semoga membantu ya teman :))

https://jsfiddle.net/ga7ptu5o/

<form id="frm1">
<p><b>Step 2 : Select the size of pizza you want:</b></p>
        <input type="radio" name="size" value="small" id="radOne">Small
        <input type="radio" name="size" value="medium" id="radTwo">Medium
        <input type="radio" name="size" value="large" id="radThree">Large
        <br>

        <p><b>Step 3 : Select the pizza toppings you want:</b></p>
        <input type="checkbox" name="topping" value="peperoni">Pepperoni
        <input type="checkbox" name="topping" value="Sausage">Sausage
        <input type="checkbox" name="topping" value="Mushrooms">Mushrooms<br>
        <input type="checkbox" name="topping" value="Pineapple">Pineapple
        <input type="checkbox" name="topping" value="Black Olives">Black Olives
        <input type="checkbox" name="topping" value="Meatball">Meatball <br>

        <br>    
        <input type="button" onclick="submitFunc()" value="Submit Order">
        <input type="button" onclick="reset()"  value="Clear Entries">      
   </form>

function submitFunc(){
        //document.getElementById("frm1").submit();
        var form = document.getElementById('frm1');        
        var price = 0;
        var size_value; 

        var checked_size = document.querySelector('input[name = "size"]:checked');
        var checked_topping = form.querySelectorAll('input[type = "checkbox"]');

        if(checked_size != null){  
            size_value = checked_size.value;
            if(size_value === 'small'){
                price = 15.00;
            }else if (size_value === 'medium'){
                price = 20.00;
            }else{
                price = 25.00;
            }
        } else {
            alert('You have to select a Pizza size'); 
            return;
        }

        var txt_topping = "";
        var i;
        for(i = 0; i < checked_topping.length; i++){
            if(checked_topping[i].checked){
                 txt_topping = txt_topping + checked_topping[i].value + ", ";
            }
        }

        if(txt_topping != '')
            txt_topping = '. With ' + txt_topping + ' topping';

        alert('You have selected ' + size_value + ' size, price is: ' + price + txt_topping);
    };

    function reset() {
        document.getElementById("frm1").reset();
    };
1
Tomato32 21 Oktober 2019, 04:00
<form>
<p><b>Step 2 : Select the size of pizza you want:</b></p>
        <input type="radio" name="size" value="small" id="radOne">Small
        <input type="radio" name="size" value="medium" id="radTwo">Medium
        <input type="radio" name="size" value="large" id="radThree">Large
        <br>

        <p><b>Step 3 : Select the pizza toppings you want:</b></p>
        <input type="checkbox" name="topping" value="peperoni">Pepperoni
        <input type="checkbox" name="topping" value="Sausage">Sausage
        <input type="checkbox" name="topping" value="Mushrooms">Mushrooms<br>
        <input type="checkbox" name="topping" value="Pineapple">Pineapple
        <input type="checkbox" name="topping" value="Black Olives">Black Olives
        <input type="checkbox" name="topping" value="Meatball">Meatball <br>

        <br>    
        <input type="button" onclick="submitFX()" value="Submit Order">
        <input type="button" onclick="reset()"  value="Clear Entries">
   </form>
<script>
    function submitFX() {
     //   document.getElementById("frm1").submit();
        var radOne = document.getElementById("radOne");
        var radTwo = document.getElementById("radTwo");
        var radThree = document.getElementById("radThree");
        var price;

        if (radOne.checked){
            price = 15.00;}
        else if (radTwo.checked){
            price = 20.00;}
        else{
            price = 25.00;
            }
        alert("MY PIZZA CAFE \nTotal Price is : "+ price +"");

    }

    function reset() {
    document.getElementById("frm1").reset();
    }

    </script>
0
Hack Dawg 21 Oktober 2019, 03:18