sl-form getFormData is empty - why?

[oliveratgithub]

I have a form within an sl-dialog like below, and want get and pass the Form's field values to an AJAX-request. I tried using the documented getFormData()-method, but it's always empty. Using getFormControls() is properly working, though.

<sl-dialog label="Feedback" class="feedback-dialog">
    <sl-form class="input-validation-required">
	<sl-textarea class="left-aligned" name="feedback" label="Your Message" resize="vertical" maxlength="800" required></sl-textarea>
	<sl-radio-group class="flex-fields l-pad-t left-aligned" label="Type of feedback" required>
		<sl-radio value="general" checked>General</sl-radio>
		<sl-radio value="feature" class="l-pad-l">Suggestion</sl-radio>
		<sl-radio value="issue" class="l-pad-l">Issue</sl-radio>
	</sl-radio-group>
	<p class="left-aligned"><sl-label>Contact details</sl-label></p>
	<fieldset class="flex-fields">
		<sl-input class="half left-aligned" name="given-name" type="text" label="Name" autocomplete="name"></sl-input>
		<sl-input class="half left-aligned" name="email" type="email" inputmode="email" label="Email" autocomplete="email"></sl-input>
	</fieldset>
	<input type="hidden" name="request-token" value="abc123">
	<sl-button class="l-pad-t push-right" type="primary" size="medium" submit>Submit</sl-button>
    </sl-form>
</sl-dialog>

And the JavaScript:

const dialog = document.querySelector('.feedback-dialog');
const feedbackForm = dialog.querySelector('.input-validation-required');

// Event Listeners
feedbackForm.addEventListener('sl-submit', () => console.log(JSON.stringify(feedbackForm.getFormData(), null, 4)));
//feedbackForm.addEventListener('sl-submit', () => console.log(feedbackForm.getFormData())); // No JSON.stringify

Any ideas why this is not returning anything (no form field values)?

[trailsnail]

Hi @oliveratgithub

I think that JSON.stringify is the problem here.
Everything works as expected, if you follow the examples on the homepage.
I have packed your example into a fiddle and also get the form data with some adjustment.

https://jsfiddle.net/7ej5kmsu/9/

Greetings and have a nice day

[oliveratgithub]

Thanks @trailsnail and yes, you're right – it works. I was confused because console logging feedbackForm.getFormData() looked empty every time (even when removing JSON.stringify).

I ultimately had to go with your Example 2:

    // Example 2: Output all form control names + values
    for (const entry of formData.entries()) {
      output += `${entry[0]}: ${entry[1]}\n`;
    }
    console.log(output);

[claviska]

@trailsnail is correct — FormData objects can't be serialized with JSON.stringify(). Here's an updated version of your form handler. I'm also using event.detail.formData here, as this will prevent the form from being serialized again.

feedbackForm.addEventListener('sl-submit', event => {    
  const formData = event.detail.formData;
  const data = {};

  formData.forEach((value, key) => data[key] = value);

  console.log(JSON.stringify(data, null, 2));    
});

I'm adding a section to the docs to make this more clear.