Question

the hidden div will appear if the selected value from the form matches the value of the div

the script for detecting the value of the input field

<script> $(document).ready(function() {
    $("input[name$='sel']").ready(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#sel" + test).show();
    }); });

</script>

value of the field and the divs that are supposed to show when the value of the input field is correct

<table><tr><td> <strong><font  size="3" >Payment Method</font></strong>

<p> <?php echo $_POST["sel"]; ?> <input type="radio" name="sel" value="<?php echo $_POST["sel"]; ?>" /> </p>  <!====================================================================================> </td><td> <img src="img/sep.png" />  </td><td> <!====================================================================================> <div id="selCreditCard" class="desc"> <table><tr><td>


<p> <label for="card"><strong>Card Number : </font></strong></label><?php echo $_POST["card"]; ?>
        <input name="card"   type="hidden"  id="card" value="<?php echo $_POST["card"]; ?>"  style="width:85px;" 

class="validate[custom[card]] text-input" /> </p> <br>

<label for="ccv" ><strong>CVV2 Code : </strong></label><?php echo $_POST["ccv"]; ?>
        <input type="hidden"  name="ccv" id="ccv" style="width:30px;margin-bottom:2px;margin-left:12px;" value="<?

php echo $_POST["ccv"]; ?>" />



<br>

<label><strong>Expiration Date</strong>

<p> <label for="mon"><strong>Month : </strong></label><?php echo $_POST["mon"]; ?>
        <input type="hidden"   name="mon" id="mon" style="width:15px;" value="<?php echo $_POST["mon"]; ?>" />

      <label for="yir" ><strong>Year : </strong></label><?php echo $_POST["yir"]; ?>
        <input type="hidden"  name="yir" id="yir" style="width:15px;" value="<?php echo $_POST["yir"]; ?>" />
        </p>

</div> <!====================================================================================> <div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;"> Please make sure that you have paid the amount on the Paypal payment page.<br> If not click here to proceed <img src="img/ppal.png" height="36" style="margin-bottom:-13px;" onclick="window.open

('paypal/paypal.html','Paypal','width=450,height=300,left=160,top=170');" style="cursor:pointer;"/>  </div> <!====================================================================================> <div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;"> <font size="0.5"> <strong>Processing Time</strong><br> A bank wire is not an instant transfer. "Two to three business days" are<br> required to process the transfer and 

allow the recipient to see the wired funds.</font> </div> <!====================================================================================> </td></tr></table>

i cant get the divs to show on the next page even if the correct value was entered on the field what approach will be much efficient or do you think will work for this code?

Answer 1

You should have used click event on input.

<script> 
     $(document).ready(function() {
        var test = $("input[name='sel']").val();
         $("div.desc").hide();
         $("#sel" + test).show();
  });

</script>