Question
Adobe Acrobat Pro create PDF from web page javascript events not working
I created a web page where sections of the page show/hides upon the value coming from select box. The HTML works fine when run in a browser, but it doesn't works when I create a PDF out of this html page using Adobe Acrobat Pro. The Javascript seems working looks it doesn't capture the events. Here is my code. Appreciate your help with this.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<br/>
<div id="section01_1">
<select id="selector01">
<option value="NA">Show a section</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<br/>
<br/>
<div id="section01_2">
Enter Name: <input type="text"
id="fname"/>
</div>
<br/>
<br/>
<div id="section01">
This is my section one
</div>
<div id="section02">
This is my section two
</div>
<div id="section03">
This is my section three
</div>
<div id="section04">
This is always visible
</div>
</body>
<script language="JavaScript">
const el = document.getElementById('selector01');
const box01 = document.getElementById('section01');
const box02 = document.getElementById('section02');
const box03 = document.getElementById('section03');
box01.style.visibility = 'hidden';
box02.style.visibility = 'hidden';
box03.style.visibility = 'hidden';
el.addEventListener('change', function handleChange(event) {
if (event.target.value === 'A') {
box01.style.visibility = 'visible';
} else {
box01.style.visibility = 'hidden';
}
if (event.target.value === 'B') {
box02.style.visibility = 'visible';
} else {
box02.style.visibility = 'hidden';
}
if (event.target.value === 'C') {
box03.style.visibility = 'visible';
} else {
box03.style.visibility = 'hidden';
}
});
</script>
</html>
AdChoices