title: Issue using preventDefault() in a function
body: <p>I have a button i have in a middle of a form that i want to pull some info in by ajax. I have created a function and have the button setup like this:</p>
  
  <pre><code>&lt;button id="class-list" onclick="updateMc()" class="btn btn-warning" style="margin: 0;"&gt;Update MC&lt;/button&gt;
  </code></pre>
  
  <p>i have the function setup like this: But this still submits the form.</p>
  
  <pre><code>function updateMc(event){
              event.preventDefault();
              var companyMc = $('#company_mc').val();
              $.ajax({
                  type: "POST",
                  url: "/saferscrapers",
                  data: {
                      'company_mc': companyMc
                  },
                  complete: function(response) {
                      var responseText = response.responseText;
                      var json = jQuery.parseJSON(responseText);
                      for (var key in json){
                          if (json[key] != '') {
  
                              var element = document.getElementById(key);
  
                              if (element.type == 'checkbox') {
                                  element.checked = (json[key] == "true");
                                  element.value = (json[key] == "true" ? '1' : '0' );
  
                              }
                              else {
                                  element.value = json[key];
                              }
  
  
                          }
  
                      }
                  }
              });
  
          }
  </code></pre>