Show/hide div based on radio button selection

Question

So I found other answers online, but I'm curious to know why what I have isn't another valid solution. When I click a radio button no divs appear/disappear. I have display:none by default. (I also tried using CSS instead of JS and that also didn't work)

index.php file:

if(isset($_POST['pickupDelivery'])){
    if($_POST['pickupDelivery'] == "pickup"){
        ?>
        <script type="text/javascript">
            document.getElementById("pickupName").style.display="block";
            document.getElementById("desiredPickup").style.display="block";
            document.getElementById("deliveryAddress").style.display="none";
            document.getElementById("desiredDelivery").style.display="none";
        </script>
        <style>
            #pickupName, #desiredPickup {
                display: block; 
            }
            #deliveryAddress, #desiredDelivery {
                display: none;
            }
        </style>    
        <?php
    } else if($_POST['pickupDelivery'] == "delivery") { 
        ?>
        <script type="text/javascript">
            document.getElementById("pickupName").style.display="none";
            document.getElementById("desiredPickup").style.display="none";
            document.getElementById("deliveryAddress").style.display="block";
            document.getElementById("desiredDelivery").style.display="block";
        </script>
        <?php
    }
}

Answer 1

See the example: https://jsfiddle.net/Dhanck/8rjn9v68/1/

for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      val = radios[i].value;
      document.getElementById("box1").style.display="none";
      document.getElementById("box2").style.display="block";
    }else{
     document.getElementById("box2").style.display="none";
      document.getElementById("box1").style.display="block";
    }
  }

Answer 2

This should set everything as hidden.

<style>
     #pickupName, #desiredPickup, #deliveryAddress, #desiredDelivery {
       display: none; 
    }
</style>  

and this should show and hide the fields according to the radio button

if(isset($_POST['pickupDelivery'])){
    if($_POST['pickupDelivery'] == "pickup"){
        ?>
        <script type="text/javascript">
            document.getElementById("pickupName").style.display="block";
            document.getElementById("desiredPickup").style.display="block";
        </script>
        <?php
    } else if($_POST['pickupDelivery'] == "delivery") { 
        ?>
        <script type="text/javascript">
            document.getElementById("deliveryAddress").style.display="block";
            document.getElementById("desiredDelivery").style.display="block";
        </script>
        <?php
    }
}

Answer 3

see here jsfiddle

an example with JQ i don't know how your html looks so i made one myself

<div class="test">
    aaa
</div>
<div class="test">
    bbb
</div>
<div class="test">
    ccc
</div>
<div class="test">
    ddd
</div>
<div class="radios">
    <input type="radio" >
    <input type="radio" >

</div>

css :

div.test { display:none}

JQ :

var radio = $("input:radio")

$(radio).change(function(){
    if ($(this).is(':first-child')) {
        $(".test:nth-child(1),.test:nth-child(2)").show()
        $(".test:nth-child(3),.test:nth-child(4)").hide()
    }else{
        $(".test:nth-child(3),.test:nth-child(4)").show()
        $(".test:nth-child(1),.test:nth-child(2)").hide()
    }
});

or with just CSS

see here jsfiddle

html :

<input type="radio" class="button1" >
<input type="radio" class="button2">
<div class="test1">
    aaa
</div>
<div class="test2">
    bbb
</div>
<div class="test3">
    ccc
</div>
<div class="test4">
    ddd
</div>

css :

div { display:none}
input.button1:checked ~ .test1,input.button1:checked ~ .test2 {display:block}
input.button1:checked ~ .test3,input.button1:checked ~ .test4 {display:none}
input.button2:checked ~ .test3,input.button2:checked ~ .test4 {display:block}
input.button2:checked ~ .test1,input.button2:checked ~ .test2 {display:none}

Answer 4

I think you could easily do that with jQuery

jQuery

$("input[type=radio]").change(function() {
  if ($(this).val() === 'pickup') {
    $("#pickupName").addClass("show");
    $("#desiredPickup").addClass("show");
    $("#deliveryAddress").removeClass("show");
    $("#desiredDelivery").removeClass("show");
  } else if ($(this).val() === 'delivery') {
    $("#deliveryAddress").addClass("show");
    $("#desiredDelivery").addClass("show");
    $("#pickupName").removeClass("show");
    $("#desiredPickup").removeClass("show");
  }
});

And simply add this to your CSS

CSS

.show{
  display: block !important;
}

But you are asking why your piece of code isn't working. Make sure that your script tags are before the body end or head end tag. Maybe then it works.