How to prevent template from reloading with Ajax?

I have two forms and two submit buttons and two textareas. The situation is that if I uplaod the content to one textaarea the content of other texarea will be lost because of reloading. So that is why I try to implement Ajax.

So I have it like this:

<body>
    <div class="container center">
      <span class="form-inline" role="form">
        <div class="inline-div">
          <form
            class="form-inline"
            role="form"
            action="/controlepunt140"
            method="POST"
            enctype="multipart/form-data"
            id="form_pdf"
          >
            <div class="form-group">
              {% csrf_token %} {{ form }}
              <button type="submit" name="form_pdf" class="btn btn-warning">
                Upload!
              </button>
            </div>
          </form>
          <div class="form-outline">
            <div class="form-group">
              <textarea class="inline-txtarea form-control" cols="70" rows="25">
{{content}}</textarea
              >
            </div>
          </div>
        </div>
      </span>

      <span class="form-inline" role="form">
        <div class="inline-div">
          <form
            class="form-inline"
            role="form"
            action="/controlepunt140"
            method="POST"
            enctype="multipart/form-data"
            id="form_excel"
          >
            <div class="form-group">
              {% csrf_token %} {{ form }}
              <button type="submit" name="form_excel" class="btn btn-warning">
                Upload!
              </button>
            </div>
          </form>
          <div class="form-outline">
            <div class="form-group">
              <textarea class="inline-txtarea form-control" cols="65" rows="25">
{{content_excel}}</textarea
              >
            </div>
          </div>
        </div>
      </span>
    </div>

    <script type="text/javascript">
      $("#form_pdf").submit(function (e) {
        $.ajax({
          url: "/controlepunt140",
          type: "POST",
          data: new FormData(this),
          processData: false,
          contentType: false,
          success: function (result) {
            console.log(result);
          },
        });
        e.preventDefault();
      });

      $("#form_excel").submit(function (e) {
        $.ajax({
          url: "/controlepunt140",
          type: "POST",
          data: new FormData(this),
          processData: false,
          contentType: false,
          success: function (result) {
            console.log(result);
          },
        });
        e.preventDefault();
      });
    </script>
  </body>

But then I get this error:

Status
500
Internal Server Error

Question: how to tackle this?

So if I try it now:

 <script type="text/javascript">
      $("#form_pdf").submit(function (e) {
      
        e.preventDefault();
      });

      $("#form_excel").submit(function (e) {      
        
        e.preventDefault();
      });
    </script>

But nothing happens then. I cant even upload a file. But I see this message:

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://b763c03f-2bac-417c-931f-361473344789/content-scripts/identity-protection/main.js
Source Map URL: compat.module.js.map

Back to Top