Send HTML form with Javascript variable to PHP -> Mysql

Question

I wrote a web page that is meant to be like a survey that submits both entries in html text boxes as well as images of canvas drawings. Currently I have my PHP file transferring from the HTML form via 'Post' to plug into the database once "Submit" is pressed. In the script inside my HTMl file, I convert the canvas drawing through "var dataURL = canvas.toDataURL();".

I was wondering how I would go about (hopefully using the same PHP file) sending the var dataURL to mySQL alongside the my HTML form. I'm also not entirely sure how the dataURL should be stored in mySQL as well. But the goal is to make an entry like "ID, Name, Image (dataURL)". I'm still pretty new to PHP, and I heard AJAX is usually used but i'm not sure how to make that work alongside the HTML form.

Any help is appreciated, Thank you!

Answer 1

How are you sending the data currently? and did you specify the format of the data in toDataURL()? You can also check out the followings Decoding a canvas todataURL and Sending a canvas.toDataUrl() to php via AJAX , You can also send it using canvas.toDataURL("image/png") as an image.

This question is the nearest to your question and a possible duplicate have a look How to save an HTML5 Canvas as an image on a server?

also go through How To Save Canvas As An Image With canvas.toDataURL()? and Form submit with AJAX passing form data to PHP without page refresh

Answer 2

You'll want to use AJAX if you want to submit the form data without actually navigating to the script URL in your browser. AJAX allows you to send the data to the script and receive the response from the script, all without leaving the page you are on. If this is what you are looking for, there are plenty of examples of how to use AJAX on SO and other sources. However, since you have some custom data you want to send along, you have two options:

1. Add a hidden input to your form and populate the value of that hidden input with the dataURL.

2. Append the custom data to your serialized form data.

Going with the second option, your AJAX call would look something like this:

// this is the id of the form
$("#idForm").submit(function(e) {
    var form = $(this);
    var url = form.attr('action'); //PHP script URL can also be manually entered here if the form does not have the 'action' attribute set

    // get the dataURL from the canvas element
    var dataURL = encodeURIComponent(canvas.toDataURL());

    // build AJAX data string
    var dataString = form.serialize() + "&dataURL=" + dataURL;

    $.ajax({
        type: "POST",
        url: url,
        data: dataString,
        success: function(data){
            alert(data); // *optional* show response from the php script.
        }
    });

    e.preventDefault(); // cancel actual form submission.
});

As far as storing the dataURL value in your MySQL database, you can use a field formatted as TINYTEXT , TEXT , MEDIUMTEXT , or LONGTEXT depending on the expected size of the dataURL strings being produced (see The BLOB and TEXT Types from the MySQL 8.0 Reference Manual). Good luck!

Answer 3

if u know javascript then please learn jQuery as it will help to make ajax request more simple. With the help of ajax you can send data using POST.

To store data url, you need to specify the address of the file in the mysql table: eg: if my profile image is in "rootDIR/profiles/myname.jpg" then store "profiles/myname.jpg" in the table.