Update Structure Field After form Submit with Javascript

Kirby 3 Solved ✅
,
1

I’m currently working on a project where I have a pop-up form built with Kirby CMS. When the form is submitted, I want to update a specific structure field in my storage.txt content file, but I’d like to do this using JavaScript to avoid reloading the page. Is this possible?

Currently, the controller and form are working as intended, but the pop-up closes without a success message when the form is submitted.

I can get the information in JS and prevent the form from being submitted just not sure where to go from here. But I am getting an error about

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("popup-form");

  form.addEventListener("submit", function(event) {
    event.preventDefault(); 
    
    // Log FormData for debugging
    let formData = new FormData(form);
    for (var pair of formData.entries()) {
      console.log(pair[0]+ ', ' + pair[1]); 
    }

    fetch(form.action, {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log("Received JSON response:", data); 
      alert(data.message);
    });
  });
});
2

The standard controller does not return JSON. Instead of posting to the standard controller, use a JSON representation to send your AJAX request to.