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>