I need to be able to use three radio buttons to determine which P’s display on a page. All items are queried from a database so there is no fixed number. I’d like to stick with javascript if possible. All is written inside PHP code
Tried using the following:
<?php
//Javascript function to show selected duration price:
echo"<script>
function showPrice(duration)
{
if(duration == "1")
{
var a = document.querySelectorAll('p[id^=price1]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price1]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
if(duration == "2")
{
var a = document.querySelectorAll('p[id^=price2]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price2]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
if(duration == "3")
{
var a = document.querySelectorAll('p[id^=price3]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="block;";
}
}
else
{
var a = document.querySelectorAll('p[id^=price3]')
for (index = 0; index < a.length; ++index)
{
document.getElementById(a[index]).style.display="none;";
}
}
}
</script>
";
Then each P will have the option of 6 prices that should only be visible if the corresponding radio options are selected:
while($pack_row = mysql_fetch_array($packageResults))
{
echo"<div class=submenuContainer style="margin: 0px 0px 0px $leftMargin"."px; width: $product_params[linkContainerWidth]"."px;">";
echo"nnn <a class=submenu title="{$pack_row["package_name"]}" id='package_id' href="javascript:ajaxFunction({$pack_row["package_id"]},null);inPagePopup();" style="background-image: url('$link_bg_img'); height: $product_params[link_height]"."px; width: $product_params[link_width]"."px; ">";
echo"n</a>";
echo"n<span class=submenuExtraText>";
$pricesAry = price_calculator("{$pack_row["package_id"]}","","","");
echo"n <p style="float: left; text-align: left;"><input class="$radioInputStyle" type=radio name=leaseInfo[packageID] value={$pack_row["package_id"]}> SELECT</p>";
//P's hidden unless lease duration selected below
echo"n <p class='priceDisplay' id='price1".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][1]."</b></p>";
echo"n <p class='priceDisplay' id='price2".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][2]."</b></p>";
echo"n <p class='priceDisplay' id='price3".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][3]."</b></p>";
echo"n <p class='priceDisplay' id='price4".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][4]."</b></p>";
echo"n <p class='priceDisplay' id='price5".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][5]."</b></p>";
echo"n <p class='priceDisplay' id='price6".$ck."' style="float: right; text-align: right; display: none;"><b>$".$pricesAry['subTotal'][6]."</b></p>";
echo"n</span>";
echo"n</div>";
$ck++;
$t++;
}
And here are the radio boxes:
echo"<b>How long?</b><br>";
echo"<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1);"> 3     ";
echo"<input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2);" checked> 6     ";
echo"<input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3);"> 12     ";
echo"<br><br>";
?>
Advertisement
Answer
Something like this?
function showPrice(duration) {
var prices = document.getElementsByClassName('priceDisplay');
for (var i = 0; i < prices.length; i++) {
var price = prices[i];
if (price.classList.contains('p'+ duration))
price.style.display = "block";
else
price.style.display = "none";
}
}
<input id=duration1 class=radio type=radio name=leaseInfo[duration] value="1" onClick="showPrice(1)" checked><label for=duration1> Price 1</label> <input id=duration2 class=radio type=radio name=leaseInfo[duration] value="2" onClick="showPrice(2)"><label for=duration2> Price 2</label> <input id=duration3 class=radio type=radio name=leaseInfo[duration] value="3" onClick="showPrice(3)"><label for=duration3> Price 3</label> <h3>Item 1</h3> <p class='priceDisplay p1' id='price1-i1'><b>Price1: $35.45</b></p> <p class='priceDisplay p2' id='price2-i1' style='display: none;'><b>Price2: $22.45</b></p> <p class='priceDisplay p3' id='price3-i1' style='display: none;'><b>Price3: $654.45</b></p> <p class='priceDisplay p4' id='price4-i1' style='display: none;'><b>Price4: $11.45</b></p> <p class='priceDisplay p5' id='price5-i1' style='display: none;'><b>Price5: $5.45</b></p> <p class='priceDisplay p6' id='price6-i1' style='display: none;'><b>Price6: $77.45</b></p> <h3>Item 2</h3> <p class='priceDisplay p1' id='price1-i2'><b>Price1: $45.65</b></p> <p class='priceDisplay p2' id='price2-i2' style='display: none;'><b>Price2: $12.45</b></p> <p class='priceDisplay p3' id='price3-i2' style='display: none;'><b>Price3: $14.35</b></p> <p class='priceDisplay p4' id='price4-i2' style='display: none;'><b>Price4: $32.46</b></p> <p class='priceDisplay p5' id='price5-i2' style='display: none;'><b>Price5: $45.52</b></p> <p class='priceDisplay p6' id='price6-i2' style='display: none;'><b>Price6: $99.76</b></p>