Quiero que cuando el usuario haga clic en el botón Enviar pedido, el cuadro de alerta contenga palabras y también aparezca el precio total del tamaño seleccionado y la parte superior, luego haga clic en un botón para cerrar el botón de alerta. Necesito usar JavaScript para calcular el precio total de la pizza si el usuario selecciona el botón de opción y la casilla de verificación. Pero realmente no sé cómo hacerlo. Alguien puede ayudarme . Por cierto para este problema, solo uso JavaScript y html

Estos son algunos códigos que ya he progresado en el uso de html y 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>
javascript html
0
Nisha 21 oct. 2019 a las 05:02

3 respuestas

La mejor respuesta

Estás en el camino correcto, es solo que la función submit () activa el envío del formulario que hace una redirección. Verifique el código a continuación para salchichas y pepperoni y haga lo mismo para las otras casillas de verificación.

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 oct. 2019 a las 03:29 
<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 oct. 2019 a las 03:18

Alguien ha respondido tu pregunta. Pero aquí está mi solución. Puedes consultarlo. Espero ayudar, mi amigo :))

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 oct. 2019 a las 04:00

Nuevas preguntas

2 ¿Recortar una URL actual de caracteres adicionales?
2 Javascript .on ('click' no funciona en span
2 ¿Cómo puedo configurar el estado de un componente de reacción cuando cambio el tamaño de mi pantalla?
2 Pedir datos en localStorage
2 Mostrar la versión corta o completa del texto
2 Javascript-JQuery cuando
2 Patrón de expresiones regulares JS para un caso específico
2 ¿Cómo seleccionar el próximo hijo inmediato usando querySelector?
2 ¿Cómo tomar una imagen de un objeto y ponerla en un elemento en react native?
2 Obtenga un documento de Firestore y devuélvalo a una variable
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas relacionadas con la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excluyendo ActionScript). Esta etiqueta rara vez se usa sola, pero a menudo se asocia con las etiquetas [node.js], [json] y [html].

javascript...