How to change a value of a form field in Form Blocks (React version)

Custom Coding
1

Form blocks are listening to a special event called update-fields.
When block is loaded block-loaded event is triggered after which one can set form field values in name, value pairs and trigger update-fields event.

<script>
window.addEventListener('block-loaded-form1', () => {
	const updateFields = new CustomEvent('update-fields-form1', {
			detail: {
				'Full Name': 'Softr',
				'Email': 'info@softr.io'
			}
	});
	window.dispatchEvent(updateFields);
});
</script>

form1 is the name of the block set in the softr studio block settings panel.

3 Likes
2

Thanks for sharing Arthur!

Is it possible to hide fields in Forms Blocks? What other events do Form Blocks listen to (other than update-fields); anything like hide-fields or show-fields?

Thanks,

3

Thank you very much for this code which works perfectly well. Do you have the event that a form waits for to fill in the options of a dropdown field? This would allow pre-filling the options via a script

4

@artur Are there any other custom events that we can listen to? I’m particularly interested in knowing when a Edit modal has been populated from its underlying datasource.

5

@artur Thanks for this. For me this code works only for a split-second and then the values are being reset to empty. Adding a setTimeoutwith 2000 works but it creates a laggy experience. Any ideas?

6

Hmm, this isn’t working for me. I confirmed the event is getting dispatched, and I changed the name of the form to the name I have in the interface, but the text in the text-box isn’t actually updating. Just to check - the ‘detail’ attributes are the names of the different fields in the form, correct?

7

@artur What if I wanted to set the value of a field in the list-details modal or the signup page? Is there something that should be done differently? For example a signup called “signup1” doesn’t seem to work with a custom event update-fields-signup1