javascript - POST 从函数中提取数据

标签 javascript php jquery html

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

我正在处理签名,通过 PNGURL 将其转换为 IMAGE/PNG。我想做的是发布生成的 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>

最佳答案

您需要输入具有 name 属性,以便与表单提交一起提交

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

</form>

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

关于javascript - POST 从函数中提取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40033148/

相关文章:

javascript - Internet Explorer 11 中的 Jquery 对话框问题

javascript - 在 JavaScript 中将函数的参数存储在变量中

php MySQL 查询不返回任何内容

javascript - PHP 在所有浏览器上禁用缓存

javascript - 转换为普通 JavaScript 的 jQuery slider 不起作用

javascript - jquery在分层菜单中选择li元素

javascript - React 中方括号解构的概念理解

php - GMail SMTP 避免在 PHP 代码中使用直接密码

java - 如何获取具体日期?

javascript - 为什么在第一个 if 语句为 true 后,我的第二个 if 语句连续运行两次?