title: Why is my form submission still refreshing the page?
body: <p>I am new to ajax and know some basic jQuery. However, when testing out a simple test ajax script, I'm running into difficulty.</p>
  <p>And I have read other questions that our similar to mine but I haven't been able to get any results.</p>
  <p>What I hope to achieve: when the input field is &quot;onblur&quot;ed it submits the form it's in, sends the ajax request to a file that simple echos what was submitted in json format and returns it and logs the response to the console.</p>
  <p>Here is what I have done. This is the form that submits when you click off the input field:</p>
  <pre><code>&lt;form id=&quot;title_form&quot; method=&quot;POST&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-12&quot;&gt;
              &lt;div class=&quot;form-group&quot;&gt;
                  &lt;label for=&quot;project_title&quot;&gt;Project Title&lt;/label&gt;
                  &lt;div class=&quot;input-group input-group-lg&quot;&gt;
                      &lt;input onblur=&quot;return document.getElementById('title_form').submit();&quot; id=&quot;project_title&quot; type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;project_title&quot; required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>This is the ajax script:</p>
  <pre><code>$(document).ready(function() {
    var root = $('#url_root').val();
    var php_file = 'assets/ajax/update.php';
    var url = root+php_file;
      $('#title_form').submit(function(e) {
          e.preventDefault();
          $.ajax({
              type: &quot;POST&quot;,
              url: url,
              data: $(this).serialize(),
              success: function(response)
              {
                var jsonData = JSON.parse(response);
                console.log(jsonData);
             }
         });
       });
  });
  </code></pre>
  <p>And this is the update.php page that echos the post data in json format:</p>
  <pre><code>&lt;?php
      
      if(isset($_POST['project_title'])){
          echo json_encode($_POST['project_title']);
      }
  ?&gt;
  </code></pre>
  <p>The onblur submit form part is working fine!</p>
  <p>However, my ajax script isn't preventing the page being refreshed (despite the e.preventDefault) and it's not logging the response in the console (my guess is because the ajax script isn't working at all because I have missed something obvious.</p>