Formatting data in form before posting #2746
-
Hello everyone, I am trying to take the input of X (can be scaled up or down) amount of field inputs and combine the input of them into a single array and then post it to an API endpoint. Here is my code, I have stripped all styling to hopefully make it more readable (sorry if it is broken after this simplification). <form id="library-form"
hx-post="/api/libraries"
hx-ext="json-enc"
hx-trigger="submit"
hx-target="#response"
hx-on="htmx:beforeRequest:combineFields">
<fieldset>
<div>
<input aria-label="Input" type="text" name="title" placeholder="Title" required />
</div>
<div id="folders-container">
<!-- Folder fields will be dynamically added here -->
<div>
<input type="text" name="folders" placeholder="Folder Path" required />
<button type="button" onclick="removeFolder(this)">-</button>
</div>
</div>
<button type="button" onclick="addFolder()">+</button>
<div>
<button type="submit">Submit</button>
<div id="response"></div>
</div>
</fieldset>
</form>
<script>
function addFolder() {
const container = document.getElementById('folders-container');
const newRow = document.createElement('div');
newRow.classList.add('');
newRow.innerHTML = `
<input type="text" name="folders" placeholder="Folder Path" />
<button type="button" onclick="removeFolder(this)">-</button>
`;
container.appendChild(newRow);
}
function removeFolder(button) {
button.parentElement.remove();
}
function combineFields(event) {
console.log("combineFields called"); // Debugging line
const form = event.detail.elt.closest('form');
const fields = Array.from(form.querySelectorAll('input[name="folders"]'));
// Gather folder values into an array
const folders = fields.map(field => field.value.trim()).filter(value => value !== "");
// Get other field values
const title= form.querySelector('input[name="title"]').value;
// Construct the JSON payload
const jsonData = {
title: title,
folders: folders
};
console.log("Constructed JSON:", jsonData); // Debugging line
// Replace the form data with the new JSON payload
event.detail.parameters = jsonData;
// Optional: Prevent the default form submission
// event.preventDefault();
}
// Listen for the beforeRequest event and call combineFields function
document.addEventListener('htmx:beforeRequest', combineFields);
</script> The console log shows a properly formatted object: {
"title": "My Title",
"folders": [
"Folder 1",
"Folder 2"
]
} While looking at the network tab to inspect the post payload i see the following: {
"title": "My Title",
"folders": "Folder 2"
} So the formatting works, but hx-post ignores it and uses the data from the form. Is there a way to make it use the properly formatted json object? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hey, you might want to use the Hope this helps! |
Beta Was this translation helpful? Give feedback.
Turns out I was over thinking the problem, I can just overload the folders key and parse it on the server side (using
application/x-www-form-urlencoded
)