Javascript pre selected select option not showing hidden value
I have this javascript and data get from database. The problem is, the hidden value is not showing when select option is already got its value from database. I have to play around the option then the hidden value is showing. How to show the hidden value if its pre selected from the select option?
<?php include('../includes/dbconnection.php'); ?> <html> <head> <script language="javascript"> function show(select){ if(select.value=='YA'){ document.getElementById('hidden').style.display = "inline-block";; } else{ document.getElementById('hidden').style.display = "none"; } } </script> </head> <body> <div class="form-group"> <?php $sql_update = mysqli_query($con,"Select * FROM abms_dkk AS dkk Where dkk.id = '30'"); while($row=mysqli_fetch_array($sql_update)){ $option = $row['tick']; ?> <label style="font-size: 13px;"> Select answer</label><br> <select name="tick" class="form-control" onchange="show(this)"> <option value="YA" <?php if($option=="YA") echo 'selected="selected"'; ?> >YA</option> <option value="TIADA" <?php if($option=="TIADA") echo 'selected="selected"'; ?> >TIADA</option> </select> <br> <?php } ?> </div> <a id="hidden" style="display:none;" href="add_comp.php" class="btn btn-success">Add</a> </body> </html>
Answer
I think I might be tempted to do something like this:
<?php include('../includes/dbconnection.php'); ?> <html> <head> <script> /* Register an external event handler - the js code can then be included in a separate file if needed - from a cdn perhaps. */ document.addEventListener('DOMContentLoaded',function(){ const oSelect=document.querySelector('select[name="tick"]'); const oHref=document.querySelector('a[id="hidden"]'); const show=function(e){ oHref.style.display=e.target.value=='YA' ? 'inline-block' : 'none'; }; //register `onchange` event handler oSelect.addEventListener('change',show); // show or hide hidden element immediately on load oHref.style.display=oSelect.value=='YA' ? 'inline-block' : 'none'; }); </script> <!-- Rather than inline styles it is generally preferred to use CSS... --> <style> #hidden{display:none;} .form-group label{font-size: 13px;} </style> </head> <body> <div class='form-group'> <label>Select answer</label> <br /> <select name='tick' class='form-control'> <?php /* Just to clean up the code use PHP to generate the options rather than the inline echo statements used before. */ $sql = mysqli_query( $con, 'select * from `abms_dkk` where `id` = 30' ); while( $row=mysqli_fetch_array( $sql ) ){ $option = $row['tick']; printf(' <option value="YA"%s>YA <option value="TIADA"%s>TIADA', $option=='YA' ? ' selected' : '', $option=='TIADA' ? ' selected' : '' ); } ?> </select> <br /> </div> <a id='hidden' href='add_comp.php' class='btn btn-success'>Add</a> </body> </html>