submit-form-data

Submit Form

Submit form data asynchronous

Install

npm i submit-form-data

Usage

import submitFormData from 'submit-form-data'

const form = document.querySelector('.form')

const settings = {
	dest: 'process_data.php',
	fields: '.field',
	reciever: '[e-mail]',
	extraData: {
		foo: 'bar',
	},
}

form.addEventListener('submit', async e => {
	e.preventDefault()

	try {
		const { data } = await submitFormData(form, settings)

		console.log(data)
	} catch (error) {
		const { data, valid } = error

		if (valid) {
			// connection error
			console.log(data.error)
		} else {
			// invalid form field
			console.log(data.field)
		}
	}
})

<form class="form">
	<input type="text" class="field" />
	<input type="email" class="field" />
	<textarea class="field"></textarea>

	<input type="submit" value="send" />
</form>

Options (* required)

Option	Type	Deafult	Description
dest*	String	-	Path to file to precess data
fields*	String	-	Class name of inputs to send
reciever	String	null	Email that can be later processed in the back-end
urlencoded	Boolean	false	It will send data url-encoded
extraData	Object	null	object with extra data to append to form data

Returns: Object

Property	Type	Description
ok	Boolean	true if the server was reached succesfuly
valid	Boolean	returns false if any field in the form is invalid
data	Object	returns sent data back. If ok: false returns error. If valid: false returns invalid field

Back-end example

<?php

   $data = $_POST;

   $name = $data['name'];
   $email = $data['email'];
   $message = $data['message'];

   // extra data
   $foo = $data['foo']

   $dest = isset( $data['dest'] )
      ? $data['dest']
      : '[e-mail]';

   $headers = 'From: '. $name .'<'. $email .'>'. "\r\n";
   $headers .= 'X-Mailer: PHP5'. "\n";
   $headers .= 'MIME-Version: 1.0'. "\n";
   $headers .= 'Content-type: text/html; charset=UTF-8'. "\r\n";

   $subject = 'Contact message from '. $name;

   $body = 'Name: '. $name .'<br/>'
   $body .= 'Email: '. $email .'<br/>'
   $body .= 'Message: '. $message;

   mail($dest, '=?UTF-8?B?'. $subject .'?=', $body, $headers);