Bureaucrat: a simple form handler for Meteor

Backstory

I don’t particularly enjoy handling form submissions but it is a big part of a typical web app project. My goal is always to keep forms as straightforward as possible – each field should be a regular html element with a name attribute, just like it would if you posted a form to a server the old-fashioned way. That’s it.

When I started working with Meteor a few years back I just wanted a simple form handler so I created Bureaucrat. It handles your forms and returns tidy objects.

Using the Bureaucrat package

Add the package to your Meteor project

meteor add meteorhubdotnet:bureaucrat

Make sure your form elements have a name attribute

<form id="form1">
    <input type="text" name="field1">
    <input type="text" name="field2">
    <input type="submit">
</form>

Then handle the form submission – the example below is for Blaze:

Template.MY_TEMPLATE_NAME.events({
    'submit #form1': (event) => {
        // Prevent default form submission behavior
        event.preventDefault(); 
        // Get a jQuery object of the form element
        const formObject = $(event.target);
        // Get form data with bureaucrat
        const formData = Bureaucrat.getFormData(formObject);
        // Do something with the data
        // The data form the form in this example will look like:
        // { field1: value, field2: value }
    }
});

That’s it! What do you think?

AtmosphereJS: https://atmospherejs.com/meteorhubdotnet/bureaucrat

Github: https://github.com/meteorhubdotnet/bureaucrat-meteor-package

Categorised in: JavaScript, Meteor

This post was written by Yacine