从数据中提取POST数据

时间:2016-10-14 00:33:03

标签: javascript php jquery html

我有一个签名捕获脚本,使用JS和Jquery以及HTML画布。

我正在处理签名,通过PNGURL将其转换为IMAGE / PNG。我想做的是POST结果PNGURL返回..但我遇到了问题。我对JS不太熟悉,但我已经在这方面工作了大约两天。正如您将能够看到我在发布hiddenDataURL时遇到问题。页面发布,转发到下一页,但hiddenDataURL显示为空。我已经使用警报测试了JS,以显示签名正确转换为PNGURL,但它没有正确地返回隐藏的表单元素,或者没有正确地发布到signatureaccepted.php页面。任何帮助是极大的赞赏。

这是我的两页。

JS在一个单独的页面上。

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();

};

和我试图发布的HTML表单。

<!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>

1 个答案:

答案 0 :(得分:1)

您需要输入具有名称属性才能使用表单提交

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

</form>

必须与ID相同,但在这种情况下,它意味着您的更改量最少