penhold3r/submit-form

Submit form data asynchronously

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: '[email protected]',
	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
name	String	null	Appends form-name attribute to formData
wpAction	String	null	Appends action attribute to formData to be used in wordpress
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 server data. 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']
      : '[email protected]';

   $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;

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

   if($sent){
      return json_encode(array('data' => $data))
   }else{
      return json_encode(array('error' => 'something went wrong'));
   }