javascript - 表单在点击时有效，但在 JS 提交时无效

Question

长话短说 我正在涉足一些 HTML/PHP/JS，事情总体进展顺利。我正在制作一个模拟游戏，并且正在制作游戏 map 。第 1 步是绘制 map 服务器端并将其传递给客户端每个页面加载，现在我正在尝试使用 HTML5 Canvas 和客户端 JavaScript 来处理绘制。

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

我已经或多或少地解决了从 Canvas 上的 mousedown 监听器获取点击坐标的问题，但现在我正在尝试使相同的函数更新导航表单，然后使用 javascript 加载页面。该表单有效(如果我在 x/y 坐标字段中输入 -1,-1 并单击“go”，我会获得有关网格 -1,-1 的信息，但单击网格 -1,-1 不会正确传递 POST 变量(页面确实会刷新，但检查 POST 变量的脚本 (php) 部分找不到任何变量，但如果单击“执行”按钮，则会找到它们。

Canvas 和表单如下:

<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;
}

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

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

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

Answer 1

在 PHP 页面上检查 mapnav，如下所示:

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

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

可能的解决方案

• 尝试另一个条件来测试坐标是否存在。
• 尝试为隐藏表单字段设置特定值。