title: Isolating a particular button for a download() function call in a form
body: <p>I am making a tool that has some fields that I type info to.  I have two buttons in my form, one simply clears the fields, and the second I want to initiate a download of the data in the fields. The button code is</p>
  
  <pre><code>            &lt;button id="button-reset"&gt;Clear&lt;/button&gt;
              &lt;button id="button-save"&gt;download&lt;/button&gt;
  </code></pre>
  
  <p>Where the button attributes are defined in an earlier style definition for a .form_box button{}.   Being very new to javascript I copied the following code to facilitate the download functionality</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script language="Javascript" &gt;
    function download(filename, text) {
    var pom = document.createElement('a');
     pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    pom.setAttribute('download', filename);
     pom.style.display = 'none';
          document.body.appendChild(pom);
          pom.click();
          document.body.removeChild(pom);
   }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In my form tag I call the download function and pass the parameters I need to name the .txt file to be downloaded as well as the text to put in the file. This is working fine however, the download function is called when <strong>any</strong> button in the form is pressed.  I need to isolate the function call to the "download" button. My thinking is that I need to wrap the pom.click() statement in an if whereby the "if is true" is when the download button is pressed. But I may be completely wrong on that. 
      One of the things I have tried is to remove the download() call from the form tag and place it into the button tag like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" onclick="download(this['ticket'].value, this['followup'].value); return false" id ="button-save"&gt;download&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This does prevent the "clear" button from making the download() function call, however the "download" button does nothing now.
      Your help is very much appreciated.</p>