CODEWITHSUNDEEP
javascriptphphtml
SkoobyDoo
SkoobyDoo

Reputation: 28

Form works on click but not with JS submit

Long story medium I'm dabbling in some HTML/PHP/JS and things are generally going well. I'm making a mock game, and I'm messing around with making a game map. Take 1 was drawing the map server side and passing it to the client each page load, and now I'm trying my hand at using an HTML5 canvas and clientside javascript to handle drawing.

I want to be able to have the user able to click on the map, and have a new page load with information retrieved from a database about the contents of the grid they click on. Using the server side method, I used a server side map to pass click coordinates and work out which grid they clicked on using some simple math.

I've more or less worked out getting the click coordinate from a mousedown listener on the canvas, but now I'm trying to make the same function update a form for navigation and then load the page using javascript. The form works (If I type -1,-1 into the x/y coordinate fields and click go, I get information about grid -1,-1, but clicking on grid -1,-1 does not pass the POST variables properly (the page does refresh, but the portion of the script (php) that checks for POST variables fails to find any, but does find them if you clicked the go button.

The canvas and form are as follows:

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

The relevant portion of javascript is as follows:

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

And just for completeness, the portion of PHP that checks the POST variables looks like this:

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

When clicking on the canvas, the navigation fields change to the appropriate coordinate, but when the page loads, they come up as the default 0,0 as though it was a fresh page load with no POST values. When I insert debug code after "if(isset($_POST['mapnav'])" I only ever evaluates to true if I reached the page by actually clicking "go" on the navigation form, rather than clicking on the canvas, which DOES load a new page (which can only be because of the submit function being called, it's not in an anchor or anything) but fails the above test and executes the else clause.

Is there something I'm doing wrong or missing?

EDIT: I see that what I'm missing is that clicking the submit button sets the variable I'm checking, but JS submit does not do so. I'm sure there's a JS click way I could make it happen. I could also check for the actual value(s) being set as well. Is there any practical reason to go one way over the other? Or perhaps another option that's just better?

Upvotes: 1

Views: 80

Answers (2)

Jeff
Jeff

Reputation: 6943

The value for mapnav will only get posted if you actually click the form-submit-Button!

So you got several solution options:

Eighter you establish a new variable, that might be in an hidden input, and evaluate in php for that.

Or you evaluate if you have recieved a value for xcoord

Upvotes: 0

JiFus
JiFus

Reputation: 968

On your PHP page you check for mapnav like this:

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

However, if you submit the form with Javascript, you don't set the value for pushing the button.

Possible solution(s)

  • Try another condition to test if the coordinates are present.
  • Try setting a certain value to a hidden form field.

Upvotes: 1

Related Questions