How to get data from html form? - html

Question

What is the most modern way to get data from an html form and email it to yourself?

Answer 1

One way could be to have a JQuery .sumbit() event handler on your submit button which would gather all the info from the form and send them to a backed controller which would actually send the email.
JQuery example:
$('form').submit(function(event) {
// get the form data
var formData = {
'name' : $('input[name=name]').val(),
'email' : $('input[name=email]').val(),
'phone' : $('input[name=phone]').val()
};
// process the form
$.ajax({
type : 'POST',
url : 'process.php',
data : formData,
dataType : 'json',
encode: true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
});
event.preventDefault();
});
The server side could look something like:
<?php
// process.php
$errors = array();
$data = array();
// Validation
if (empty($_POST['name']))
$errors['name'] = 'Name is required.';
if (empty($_POST['email']))
$errors['email'] = 'Email is required.';
if (empty($_POST['phone']))
$errors['phone'] = 'phone is required.';
if ( ! empty($errors)) {
$data['success'] = false;
$data['errors'] = $errors;
} else {
// Send email here
$data['success'] = true;
$data['message'] = 'Success!'
}
?>
In this way you would decouple client side logic (gather form data) and backend logic (send the email).