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>
3 respuestas
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>
<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>
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();
};
Preguntas relacionadas
Nuevas preguntas
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.