So I trying to display hidden division/section after user upload necessary file (in this case 3 files) but where do I need to use onchange javascript? here mine so far
html
<body onload="rgbOrMulti()">
<div style="padding: 14px 16px;">
<form action="/action_page.php">
<p>Red tif</p>
<input type="file" name="RedBand" accept=".tif" id="redBand" onchange="rgbOrMulti()">
</form>
<form action="/action_page.php">
<p>Green tif</p>
<input type="file" name="GreenBand" accept=".tif" id="greenBand" onchange="rgbOrMulti()">
</form>
<form action="/action_page.php">
<p>Blue tif</p>
<input type="file" name="BlueBand" accept=".tif" id="blueBand" onchange="rgbOrMulti()">
</div>
<div id="rgbDiv">
<form action="/action_page.php">
<p>Red tif</p>
<input type="text" name="filename" accept=".tif">
</form>
<form action="/action_page.php">
<p>Green tif</p>
<input type="text" name="filename" accept=".tif">
</form>
<form action="/action_page.php">
<p>Blue tif</p>
<input type="text" name="filename" accept=".tif">
</div>
</body>
javascript
function rgbOrMulti() {
if (document.getElementById('redBand').files.length != 0 && getElementById('greenBand').files.length != 0 && getElementById('blueBand').files.length != 0) {
alert(blueBand.value);
document.getElementById('rgbDiv').style.visibility = 'visible';
document.getElementById('multiDiv').style.visibility = 'hidden';
} else if(document.getElementById('redtif').files.length != 0 && document.getElementById('greentif').files.length != 0 && document.getElementById('bluetif').files.length != 0) {
document.getElementById('multiDiv').style.visibility = 'visible';
document.getElementById('rgbDiv').style.visibility = 'hidden';
}
else{
// none file insert
}
}
how do i onchange the division rgbDiv to to visible properly??
You try to set the visibility of these elements to visible with JavaScript, but your css still hiding them with display:none.
Either remove your css, or change the display property instead of visibility