title: Don't redirect on submitting form
body: <p>I have a simple HTML based form like shown below, which keeps refreshing the page on click.</p>
  
  <pre><code>&lt;form id="register" action="#" method="POST"&gt;
      &lt;div class="input-group"&gt;
          &lt;input class="form-control form-control-sm" placeholder="Email Address" name="email" type="text"&gt;
          &lt;input type="hidden" name="form" value="register"&gt;
          &lt;input type="hidden" name="type" value="websiteregistration"&gt;
          &lt;span class="input-group-append"&gt;
              &lt;button type="submit" class="btn btn-light" data-name="register" onclick="formSubmit(this)"&gt;Go!&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And I am trying to stop it from redirecting when pressing the submit button.</p>
  
  <pre><code>(function($) {
      function formSubmit(e){
          e.preventDefault(); //This will prevent the default click action
          e.stopPropagation();
  
          var frm = $('#'+ $(this).data('name') +'');
  
          $.ajax({
              type: frm.attr('method'),
              url: '(url)',
              data: frm.serialize(),
              success: function (data) {
                  console.log('Submission was successful.');
                  console.log(data);
              },
              error: function (data) {
                  console.log('An error occurred.');
                  console.log(data);
              }
          });
  
          return false;
      }
  });
  </code></pre>
  
  <p>I added return false to stop it from redirecting, aswell as PreventDefault, but the page still refreshes when sending the data (The data is being sent btw).</p>
  
  <p>I also tried to do it with $().submit, but with the same results. (I have hidden the url out of security reasons, but the submit in itself works).</p>
  
  <p>The name-data attribute is used because i have several of the same form on the page and like this I can make it reusable </p>