<!doctype html>
<link rel="alternate" type="application/json" href="{{ request.path }}.json">
<title>{{ note.title }}</title>

<body>

<a href="{{ request.path }}.json">
view data as JSON-LD</a>

<h1 class="title">{{ note.title }}</h1>

<p class="author">
  <a href="{{ note.author.profile_url }}">
      <span>{{ note.author.name }}</span></a>
</p>


<time
      datetime="{{ note.date }}">{{ note.date }}</time>

<form class="updateNote" method="patch">
  <br>

  <label class="content">Content<br>

    <textarea rows="20" cols="80" name="note_content">{{note.note_content}}</textarea>
  </label>
  <br>
  <input class="update" type="submit" value="update note">
  <script>
    var form = document.querySelector('form.updateNote');
    var button = document.querySelector('form.updateNote input.update');

    button.addEventListener('click', function (event) {
      event.preventDefault();
      var request = new XMLHttpRequest();
      request.open('PATCH', window.location.pathname);
      request.onreadystatechange = function () {
        if (XMLHttpRequest.DONE === request.readyState 
            && 200 === request.status) {
          window.location.reload(true);
        }
      }
      request.send(new FormData(form));
    }, false);
  </script>
</form>

<a rel="collection" href="{{ url_for('notelist') }}">all notes</a>
</body>

<!doctype html>
<link rel="alternate" type="application/json" href="{{ request.path }}.json">
<title>{{ note.title }}</title>

<body>

<a href="{{ request.path }}.json">
view data as JSON-LD</a>

<h1 class="title">{{ note.title }}</h1>

<p class="author">
  <a href="{{ note.author.profile_url }}">
      <span>{{ note.author.name }}</span></a>
</p>


<time
      datetime="{{ note.date }}">{{ note.date }}</time>

<form class="updateNote" method="post">
  <br>

  <label class="content">Content<br>

    <textarea rows="20" cols="80" name="note_content">{{note.note_content}}</textarea>
  </label>
  <br>
  <input class="update" type="submit" value="update note">
  <script>
    var form = document.querySelector('form.updateNote');
    var button = document.querySelector('form.updateNote input.update');

    button.addEventListener('click', function (event) {
      event.preventDefault();
      var request = new XMLHttpRequest();
      request.open('PATCH', window.location.pathname);
      request.onreadystatechange = function () {
        if (XMLHttpRequest.DONE === request.readyState 
            && 200 === request.status) {
          window.location.reload(true);
        }
      }
      request.send(new FormData(form));
    }, false);
  </script>
</form>

<a rel="collection" href="{{ url_for('notelist') }}">all notes</a>
</body>

Change `method` from "patch" to "post".
Change `method` from "patch" to "post".

In practice, browsers will ignore the value of "patch" and default to "get".
The JavaScript handler will intercept submission and send a PATCH request
regardless, but in case the client has JavaScript turned off, it might be
better to fall back to sending a POST via the form.
