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
58478940

Preguntas relacionadas

30 Cómo ejecutar una función de JavaScript cuando tengo su nombre como una cadena
14 El controlador de eventos OnChange para el botón de opción (INPUT type = "radio") no funciona como un valor
4 Envío de formulario Javascript después de la validación
2 ¿Cómo valido las casillas de verificación y muestro todas las entradas del usuario en una alerta?

Nuevas preguntas

2 Cambiar el texto del intervalo con la opción seleccionada
1 Convertir matriz en mapa o matriz 2D
1 SyntaxError: Token u inesperado en JSON en la posición 0 en JSON.parse
4 Cambiar el texto del marcador de posición cada dos segundos en React
1 URL dinámica de Datatables desde el clic del botón
2 Cómo invertir un objeto anidado de objetos
4 ¿Cómo ajustar el valor del conjunto de consultas de Django?
1 convertir la estructura de datos en JS
1 ¿Cómo se hace que un lienzo cambie de tamaño al cambiar el tamaño y eliminar la barra lateral?
1 ¿Hay alguna forma de prohibir que la pantalla se desplace al mover el tipo de entrada = rango?
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...