表单在点击时有效，但不适用于 JS 提交答案

【问题标题】：Form works on click but not with JS submit表单在点击时有效，但不适用于 JS 提交
【发布时间】：2015-10-02 03:32:39
【问题描述】：

长篇故事媒体我正在涉足一些 HTML/PHP/JS 并且事情通常进展顺利。我正在制作模拟游戏，并且正在制作游戏地图。 Take 1 是绘制地图服务器端并将其传递给每个页面加载的客户端，现在我正在尝试使用 HTML5 画布和客户端 JavaScript 来处理绘图。

我希望能够让用户能够单击地图，并加载一个新页面，其中包含从数据库中检索到的有关他们单击的网格内容的信息。使用服务器端方法，我使用服务器端地图传递点击坐标，并使用一些简单的数学计算出他们点击了哪个网格。

我或多或少地从画布上的 mousedown 侦听器获取点击坐标，但现在我试图让相同的函数更新导航表单，然后使用 javascript 加载页面。表单有效（如果我在 x/y 坐标字段中键入 -1,-1 并单击 go，我会获得有关网格 -1,-1 的信息，但单击网格 -1,-1 不会正确传递 POST 变量（页面确实会刷新，但是检查 POST 变量的脚本 (php) 部分找不到任何内容，但如果您单击“开始”按钮，则确实可以找到它们。

画布和表单如下：

<div id="scrollable">
	<canvas id="gameCanvas" width="<?php echo $max ?>" height="<?php echo $max ?>"></canvas><br/>
</div>
<div>
	<form id="gamenavform" action="game2.php" method="post">
		X Coord: <input id="gamenavx" type="text" name="xcoord" size="2" /><br/>
		Y Coord: <input id="gamenavy" type="text" name="ycoord" size="2" /><br/>
		<input type="submit" name="mapnav" value="Go" />
	</form>
</div>

javascript相关部分如下：

<script>
document.addEventListener("DOMContentLoaded", init, false);
	
function init() {
	var canvas = document.getElementById("gameCanvas");
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,99999,99999);
	canvas.addEventListener("mousedown", getPosition, false);
}

function getPosition(event) {
// long function snipped
	var navx = document.getElementById("gamenavx");
	var navy = document.getElementById("gamenavy");
	navx.value = Math.floor(x/64) - <?php echo $gameInfo[1] ?>;
	navy.value = Math.floor(y/64) - <?php echo $gameInfo[1] ?>;
	document.getElementById("gamenavform").submit();
}
</script>

为了完整起见，检查 POST 变量的 PHP 部分如下所示：

if(isset($_POST['mapnav'])) {
	$coords[0] = $_POST['xcoord'];
	$coords[1] = $_POST['ycoord'];
}
else {
	$coords[0] = 0;
	$coords[1] = 0;
}

单击画布时，导航字段会更改为适当的坐标，但当页面加载时，它们会显示为默认值 0,0，就好像它是没有 POST 值的新页面加载一样。当我在“if(isset($_POST['mapnav'])”之后插入调试代码时，我只会在通过实际单击导航表单上的“go”而不是单击画布到达页面时评估为 true，这确实加载了一个新页面（这只能是因为调用了提交函数，它不在锚点或任何东西中）但未能通过上述测试并执行 else 子句。

我做错了什么或遗漏了什么？

编辑：我看到我缺少的是单击提交按钮设置我正在检查的变量，但 JS 提交没有这样做。我确信有一个 JS 点击方式我可以实现它。我还可以检查设置的实际值。有任何实际的理由去一种方式而不是另一种方式吗？或者也许是另一个更好的选择？

【问题讨论】：

原因是，如果你不点击提交按钮，mapnav 的值不会被发布！
所以这些值实际上是通过了，但只是 mapnav 变量没有被设置？那么，重组此代码以绕过该限制的适当方法是什么？
是的，没错！我会在一秒钟内发布一些解决方案（也许几分钟......）

标签： javascript php html

【解决方案1】：

在您的 PHP 页面上，您可以像这样检查 mapnav：

if(isset($_POST['mapnav']))

但是，如果您使用 Javascript 提交表单，则无需设置按下按钮的值。

可能的解决方案

尝试其他条件来测试坐标是否存在。
尝试将某个值设置为隐藏的表单字段。

【讨论】：

即使没有明确检查 y 坐标，isset($_POST['xcoord']) 是否会让任何人畏缩？
为什么不if( isset( $_POST['xcoord'] ) && isset( $_POST['ycoord'] ) )？
我真的想不出一个设置了但另一个没有设置的场景。甚至一个空白的提交尝试都不会将 y 坐标设置为空字符串而不是 null 或 unset 或其他什么？
安全总比抱歉好，有人可以发布 x 坐标但将 y 留空。如果你检查它，你可能会抛出一个错误，否则你可能会在你的代码中得到意想不到的副作用。
很公平。我已经采用了那个解决方案，它就像一个魅力。感谢您的快速回复！

【解决方案2】：

mapnav 的值只有在您实际点击表单-提交-按钮时才会发布！

所以你有几个解决方案：

你建立一个新变量，它可能在一个隐藏的输入中，然后在 php 中进行评估。

或者您评估是否收到xcoord 的值

【讨论】：