jQuery Ajax PHP issue

Question

Probably a duplicate of a question somewhere, but I don't care. I've tried googling, but have not found an answer.

What am I doing wrong?

$(document).ready(function() {
$("#foo").click(function() {
    $.ajax({
       type    : "POST",
       cache   : false,
       url     : "map.php?map=refresh",
       data    : $(this).serializeArray(),
       success: function(data) {
        $("#container").html(data); 
       }
      });
});
});

I've tried .click(function() { , .sumbit(function() { , .bind("submit", function() { , and I believe others.

<form id="foo">
    <div id="inner"><input id="move" name="left" type="button" value="LEFT" /></div>
    <div id="inner"><input id="move" name="right" type="button" value="RIGHT" /></div>
    <div id="inner"><input id="move" name="down" type="button" value="DOWN" /></div>
    <div id="inner"><input id="move" name="up" type="button" value="UP" /></div>
</form>

I've got <div id="container" style="width:660px; height:660px;"> which contains a lot of stuff, but I'd just like it to be replaced: WORKED

Answer 1

$("#foo").submit(function() { should work but if you are going to go the for .click event handler you want it to be on the inputs. So rather than doing this

$("#foo").click(function() {

You need to do

$("#foo input").click(function() {

Also you'll need to stop the default event so the page doesn't refresh. This could be where you are going wrong. So you need to do

$("#foo input").click(function(e) {
    e.preventDefault();

    //Ajax call
});

Please note you all of your input field contain the same id of "move" which will invalidate the HTML