Get switch cascade values
<head>
<script type="text/javascript">
function myFunction(amount)
{
a=200;
b=amount;
c=a+b;
document.getElementById("demo").innerHTML=a;
document.getElementById("demo1").innerHTML=b;
document.getElementById("demo2").innerHTML=c;
}
</script>
</head>
<body>
I have 2 categories of radio buttons like
Cake Names
<input type="radio" id= "c1" name="cake1" value="50.00"
onclick="if(this.value==50.00) { myFunction(50.00); }">
<input type="radio" id= "c2" name="cake2" value="100.00">
-next is flower
<input type="radio" id= "f1" name="flow1" value="50.00">
<input type="radio" id= "f2" name="flow2" value="100.00">
Now I have a base price of 200. As soon as I select the first switch cake1, the price should increase to250(200+50)
Next, if I select a color column where the value is 100, the price should increase to (250+100)=350. This should happen dynamically. Can someone please help me.
+4
2 answers
Are you going to have people choose only one type of cake, or both?
, , , , Name. , 'on'.
, , Name, .
, , (<input type="checkbox" etc .. >), .
, - , ..
<!DOCTYPE html>
<head>
<script type="text/javascript">
function recalculate() {
var sValues ="";
var fTotal=200; // base value
var inp=document.getElementsByTagName("input")
for (var i=0;i < inp.length; i++)
{
sValues +=inp[i].name+" = " + inp[i].value+"\n"
if (inp[i].checked) {fTotal+=parseInt(inp[i].value)}
}
// not displayed but at this point sValues holds a string of the input names and values. just alert(sValues) to see it
document.getElementById("Total").innerHTML= fTotal;
}
</script>
</head>
<body>
<form name="form1">
cake1 £50 <input type="radio" id= "c1" name="cake" value="50.00" onclick="recalculate()" ><br>
cake 2 £100 <input type="radio" id= "c2" name="cake" value="100.00" onclick="recalculate()"><br>
flower 1 £50 <input type="radio" id= "f1" name="flow" value="50.00" onclick="recalculate()"><br>
flower 2 £50 <input type="radio" id= "f2" name="flow" value="100.00" onclick="recalculate()"><br>
<hr>
Total: £<div id="Total">0</div>
</form>
</body>
</html>
+1
, yo , , : , 200, 100 , , , , ( ), 200 ( ) + 100 ( ). , : file1.php:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
function getTotal(){
var data = "";
var cake = $('[name="cake"]:checked').val();
var flower = $('[name="flower"]:checked').val();
if(cake !== undefined && flower === undefined){
data = "cake="+cake;
}
if(flower !== undefined && cake === undefined){
data = "flower="+flower;
;
}
if(flower !== undefined && cake !== undefined){
data = "cake="+cake+"&flower="+flower;
}
//alert(data);
$.ajax({
url: "getTotal.php",
type: 'GET',
data: data,
beforeSend: function() {
},
success: function(data, textStatus, xhr) {
$('#result').html(data);
},
error: function(xhr, textStatus, errorThrown) {
}
});
}
</script>
<body>
<label for="c1">Cake1</label>
<input type="radio" id= "c1" class="cake" name="cake" value="50" onclick="getTotal();" />
<label for="c2">Cake2</label>
<input type="radio" id= "c2" class="cake" name="cake" value="100" onclick="getTotal();" />
<label for="f1">Flower1</label>
<input type="radio" id= "f1" class="flower" name="flower" value="50" onclick="getTotal();" />
<label for="f2">Flower2</label>
<input type="radio" id= "f2" class="flower" name="flower" value="100" onclick="getTotal();" />
<div id="result"></div>
</body>
</html>
getTotal.php:
<?php
$total1 = 0;
$total2 = 0;
$cakeBase= 200;
$flowerBase = 100;
if(isset($_GET["cake"])){
$cake = $_GET["cake"];
//echo "cake" .$cake;
$total1 = $cakeBase + $cake;
}
if(isset($_GET["flower"])){
$flower = $_GET["flower"];
//echo "flower". $flower;
$total2 = $flowerBase + $flower;
}
echo $total1 + $total2;
?>
0