POST Data pulled from function

Question

I have a signature capture script, using JS and Jquery and an HTML canvas.

I am processing the signature, converting it to IMAGE/PNG via a PNGURL. What I would like to do is to POST the resulting PNGURL return.. but I am having a problem. I'm not very familiar with JS, but I have been working on this for about two days. As you will be able to see I am having a problem posting the hiddenDataURL. The page posts, forwards to the next page, but hiddenDataURL shows empty. I have tested the JS with an alert to show that the signature is properly converting to a PNGURL, but it either not getting back into the hidden form element correctly, or isn't posting properly to the signatureaccepted.php page properly. any help is greatly appreciated.

Here are my two pages.

The JS on a seperate page.

function signatureSave() {

    var canvas = document.getElementById("newSignature"); // save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png", 0.1);
    document.getElementById("hiddenDataURL").value = dataURL;
    document.getElementById("hiddenForm").submit();

};

and the HTML form I'm trying to post.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="todataurl.js"></script>
    <script src="signature.js"></script>

</head>

<body>

    <div id="canvas">
        <canvas class="roundCorners" id="newSignature" style="position: relative; margin: 0; padding: 0; border: 1px solid #c4caac;"></canvas>
    </div>

    <script>
        signatureCapture();
    </script>
    <form id="hiddenForm" action="signatureaccepted.php" method="POST">
        <input type="hidden" id="hiddenDataURL" />

    </form>

    <button type="button" onclick="signatureSave()">Sign Out</button>

    <button type="button" onclick="signatureClear()">
                Clear signature
            </button>
    </br>
    Saved Image
    </br>
    <img id="saveSignature" alt="Saved image png" />

</body>

</html>

Answer 1

You need the input to have a name attribute for it to be submitted with the form submit

<form id="hiddenForm" action="signatureaccepted.php" method="POST">
  <input type="hidden" id="hiddenDataURL" name="hiddenDataURL"/>

</form>

it does not have to be the same as ID, but in this case it means the least amount of changes for you

POST Data pulled from function

Question

1 answers

solution1
1 ACCPTED 2016-10-14 00:55:20

POST Data pulled from function

Question

1 answers

solution1 1 ACCPTED 2016-10-14 00:55:20

solution1
1 ACCPTED 2016-10-14 00:55:20