So I have a form on my website (www.100danish.com) which includes an HTML5 canvas element for the user to draw a picture along with their form.
What I want to have happen is the user clicks submit and this sends the image of the canvas along with the form information (name, e-mail, and message). Right now what I have is the following for my AJAX and PHP. I know that I will need to use JavaScript and PHP but PHP is not my expertise.
Any help would be much appreciated!!
JavaScript
//AJAX request to submit form
$('form').submit(function(evt) {
evt.preventDefault();
var canvasData = canvas.toDataURL('image/png');
var url = $(this).attr("action");
var formData = $(this).serialize();
$.post(url, [formData, canvasData] function(response) {
$('#contact-bottom').html("<p class='ajax-p'>Thanks for reaching out to us, we'll be in touch with you soon<br>Joey & Trev</p>")
})
});
PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: $name';
$to = 'joey@100danish.com';
$subject = '100 Danish Form Submission';
$body = "From: $name
E-Mail: $email
Message:
$message";
mail ($to, $subject, $body, $email);
?>