Manipulate from answers before submitting to Server via JS/Axios/Ajax

[eliasu]

Hi all,

I have form for ordering books. In the control panel, it's possible to set which titles should be available to select/order within the form. I basically did this:

{{ form:books }}
			
   {{ if success }}
      <p>success</p>
   {{ else }}

   {{ if errors }}
      <p>error</p>
   {{ /if }}		
      
   {{selected_books}}
      <input type="checkbox" name="booktitle" value="{{title}}" />  
   {{/selected_books}}
   
{{ /form:books }}

You see, I'm creating various inputs of the same name="booktitle" through a loop. But the blueprint of the form obviously is static. How could I render the submissions of those fields to – for example – one single textarea field … ? Is there a solution for this?

I was thinking if a solution like name="booktitle_{{index}}" and then add a couple of fields in the blueprint. But that feels like a wonky solution and don't look that nice.

Any suggestions?
Thanks.

[eliasu]

Ok if anybody wonders. I played around, and found a solution. i don't know if thats best practice, but it works. Please feel free to comment and improve.

Here are the Docs to submit forms via JS (which we need, because we want to manipulate the data before submitting). But here are the steps for it in short:

1. Add Dependency

const axios = require('axios').default;

2. Get form and create defaults for axios

let form = document.getElementById("your-form-id");
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

3. Add submit eventHandler

form.addEventListener("submit", function (e) {
	// prevent default post method by statamic
	e.preventDefault();
		
	// create new form data object which stores the inputs from the user
	let formData = new FormData(form);
		
	// get content from submission (the value ist the name attribute from a form field)
	// getAll means, you get all fields with that name (in an array). This is useful if you have multiple form fields with the same name. 
	let fieldValue = formData.getAll("form-field-name-attribute");
	// example: fieldValue = "Answer from User"

	// create string 
	let str = fieldValue + " … This is the End.";
	// example: str  = "Answer from User … This is the End."

	// append string to the form data object.
	// the first argument of append takes the name of your "form-blueprint-field"
	// so create a field within your forms blueprint, where string gets saved to. 
	formData.append("form-blueprint-field", str);

	// submit the form data object with our string appended
	axios.post(form.action, formData)
	.then(response => {
	        // form submit is successful  
	})
	.catch(error => {
	         // form submit failed 
	})
});

I hope that helps someone. Feel free to improve or ask.
All the best!