title: Why multiple save pop up box appear?
body: <p>I draw chart using google chart. The chart is displayed using select box.</p>
  
  <p><a href="https://i.stack.imgur.com/oBuKp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oBuKp.jpg" alt="enter image description here"></a></p>
  
  <p>Then the button save as pdf will pop up save as dialog box to save the image in pdf format.</p>
  
  <p>This is the code:</p>
  
  <pre><code>google.charts.setOnLoadCallback(drawCategoryNameChart); 
  function drawCategoryNameChart(){
  
                  // for category-filter
                  $('#category_filter').on('change',function(){
                  var select1 = $(this).val();  // category-filter value
                  var jsonCategoryNameData = $.ajax({
                              url: "&lt;?php echo $ajaxurl11; ?&gt;",
                              contentType: "application/json",
                              data: {Value1 : select1},
                              dataType: "json",
                              async: false
                              }).responseText;
  
  
  
                  var CategoryNameData = new google.visualization.DataTable(jsonCategoryNameData);
  
                  var optionsCategoryNameChart = {
                               //title: 'Job/Internship Distribution by Category',
                               titleTextStyle: {
                                    color: 'Black',
                                    fontSize: 18
                                  },
                                  pieSliceText: 'none',
                               fontSize: '11',
                               hAxis: {
                                    title: 'Category Name',
                                  },
                               vAxis: {
                                    title: 'Total',
                                    minValue: 0,
                                    gridlines: { count: 4 }       
                                  },
                               legend: {textStyle: {color: '#464847', fontSize: 11}},
                               tooltip: {isHtml: true},
                               backgroundColor: '#F8F9FA',
                               colors: [ '#3B84BB', '#FFAF45', '#FFE345', '#0CAA63', '#1D40A6', '#F7AE12', '#F75012','#6944C3'],
                               chartArea: {
                                      backgroundColor: {
                                          stroke: '#fff',
                                          strokeWidth: 1
                                      }
                                  },
                               height: 300,
                               chartArea: { left:"10%",top:"20%",width:"70%",height:"50%" }
                                };        
  
  
                  // Instantiate and draw our pie chart, passing in some options.
                  var CategoryNameChart = new google.visualization.ColumnChart(document.getElementById('categoryname_chart_div'));
  
                  //draw the chart      
                  CategoryNameChart.draw(CategoryNameData, optionsCategoryNameChart);
  
                  google.visualization.events.addListener(CategoryNameChart, 'ready', function () {
                     btnSave.disabled = false;
                  });
  
                  var btnSave = document.getElementById('pdf-categoryname');
  
                  btnSave.addEventListener('click', function () {
                      var doc = new jsPDF();
                      doc.setFontSize(15);
                      doc.text(70, 25, "Job &amp; Internship by Category");
                      doc.addImage(CategoryNameChart.getImageURI(), 15, 30);
                      doc.setFontSize(9);
                      doc.text(50, 115, "The bar chart shows the category of job &amp; Internship posted by linked companies");
                      doc.save('category_name.pdf');
                    }, false);
  
               });
      }
  </code></pre>
  
  <p>The chart is displayed in this code;</p>
  
  <pre><code>&lt;div class="chart-3-5block-inner"&gt;
                              &lt;div class="chart-block-title"&gt;Job &amp; Internship by Category&lt;/div&gt;
                              &lt;div class="chart-view" style="padding-top: 10px; padding-left: 10px"&gt;
  
                                  &lt;!-- //combo box options to select application filter --&gt;
                                  &lt;?php
                                       echo 'Category Group: ';
                                       echo '&lt;select id="category_filter"&gt;';
                                       echo '&lt;option value="0" selected="selected"&gt;Select&lt;/option&gt;';
                                       echo '&lt;option value="1"&gt;Accounting/Finance&lt;/option&gt;';
                                       echo '&lt;option value="2"&gt;Admin/Human Resources&lt;/option&gt;';
                                       echo '&lt;option value="3"&gt;Arts/Media/Communications&lt;/option&gt;';
                                       echo '&lt;option value="4"&gt;Building/Construction&lt;/option&gt;';
                                       echo '&lt;option value="5"&gt;Computer/Information Technology&lt;/option&gt;';
                                       echo '&lt;option value="6"&gt;Education/Training&lt;/option&gt;';
                                       echo '&lt;option value="7"&gt;Engineering&lt;/option&gt;'; 
                                       echo '&lt;/select&gt;';
  
                                  ?&gt;
  
                              &lt;/div&gt;                  
                              &lt;div class="chart-view" id="categoryname_chart_div"&gt;&lt;/div&gt;
                              &lt;div class="chart-block-description"&gt;The bar chart shows the category of job &amp; Internship posted by linked companies&lt;/div&gt;
                              &lt;div class="chart-block-view"&gt;
                                  &lt;input id="pdf-categoryname" type="button" value="Save as PDF" disabled /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  </code></pre>
  
  <p>However, the save as pdf button got problem. When the select box is selected many times, multiple pop up box will appear when the save as button is clicked. 2 times clicked, 2 pop up box appear. It saves the image of all previous selected chart. How to make it appear only once although the select box selected few times?</p>
  
  <p>If I put the btnSave function outside the onchange function, then it cannot read CategoryNameChart. How to take the value of CategoryNameChart in the onchange function so that btnSave can take the value and use it?</p>
  
  <p>This is example jsfiddle to play with. But it is still not fully working. I include dummy data inside for example, so need to adjust a little bit.</p>
  
  <p><a href="https://jsfiddle.net/5aprn44f/3/" rel="nofollow noreferrer">https://jsfiddle.net/5aprn44f/3/</a></p>