Multiple Forms in single file with jQuery

[MasterACE14]

I have the following code...

	$x = $user['x'];
$y = $user['y'];

	if(isset($_POST["POSTformbuttonNorth"])) { $y++; }
	if(isset($_POST["POSTformbuttonSouth"])) { $y--; }
	if(isset($_POST["POSTformbuttonEast"])) { $x++; }
	if(isset($_POST["POSTformbuttonWest"])) { $x--; }
	mysql_query("UPDATE `cf_users` SET `x`='".$x."' , `y`='".$y."' WHERE `id`='".$user['id']."' LIMIT 1") or die(DieError(mysql_error()));
	$user = userDetails($_SESSION['userid']);
?>

<div id="content">
Explore<br />

<div id="leftcol">

<center style="margin: 2px;">
<form id="exploreForm" name="exploreForm" method="post" action="">
<input type="hidden" name="url" id="url" value="lib/explore.php" />
<input type="button" id="POSTformbuttonNorth" name="POSTformbuttonNorth" value="North" /><br />
</form>

<form id="exploreForm" name="exploreForm" method="post" action="">
<input type="hidden" name="url" id="url" value="lib/explore.php" />
<input type="button" id="POSTformbuttonWest" name="POSTformbuttonWest" value="West" />
</form>

<form id="exploreForm" name="exploreForm" method="post" action="">
<input type="hidden" name="url" id="url" value="lib/explore.php" />
<input type="button" id="POSTformbuttonEast" name="POSTformbuttonEast" value="East" /><br />
</form>

<form id="exploreForm" name="exploreForm" method="post" action="">
<input type="hidden" name="url" id="url" value="lib/explore.php" />
<input type="button" id="POSTformbuttonSouth" name="POSTformbuttonSouth" value="South" />
</form>
</center>

 

and here's the jQuery AJAX for the forms....

	// explore.php
	// north
	$('#POSTformbuttonNorth').livequery('click', function() {
	$("#contentmain").hide();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide();},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - Explore");
			$("#contentmain").show(); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px; min-height: 500px;">ERROR: Page does not exist!</p>');
            }    
	});	
});

	// west
	$('#POSTformbuttonWest').livequery('click', function() {
	$("#contentmain").hide();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide();},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - Explore");
			$("#contentmain").show(); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px; min-height: 500px;">ERROR: Page does not exist!</p>');
            }    
	});	
});

	// east
	$('#POSTformbuttonEast').livequery('click', function() {
	$("#contentmain").hide();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide();},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - Explore");
			$("#contentmain").show(); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px; min-height: 500px;">ERROR: Page does not exist!</p>');
            }    
	});	
});

	// south
	$('#POSTformbuttonSouth').livequery('click', function() {
	$("#contentmain").hide();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide();},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - Explore");
			$("#contentmain").show(); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px; min-height: 500px;">ERROR: Page does not exist!</p>');
            }    
	});	
});

 

It only seems to pick up that a form has been submitted if I have this PHP part...

		if(isset($_POST["POSTformbuttonNorth"])) { $y++; }
	if(isset($_POST["POSTformbuttonSouth"])) { $y--; }
	if(isset($_POST["POSTformbuttonEast"])) { $x++; }
	if(isset($_POST["POSTformbuttonWest"])) { $x--; }

like this...

		if(isset($_POST["POSTformbuttonNorth"])) { $y++; }
	if(isset($_POST[""])) { $y--; }
	if(isset($_POST[""])) { $x++; }
	if(isset($_POST[""])) { $x--; }

It only submits the first form, if the PHP isn't looking to see if any other form has been submitted.

 

I'm sure there must be a easier way to submit the forms, or combine them into the 1 form. The amount of code required for such a simple task seems rediculous. Especially when it only partially works.

Any help is GREATLY appreciated! 

 

Thanks, Ace