Sending FORM data to MySQL using JS in a Facebook APP (HELP!)

[adand]

I am having a problem sending my form to MySQL on my application page (when you click GameTime! it should send the data to a MySQL table.)-http://www.facebook.com/apps/application.php?id=157666347603790&v=app_157666347603790

It sends the form data here: http://bit.ly/91oi88 however, it just won't seem to work in facebook. Obviously there is something wrong with my FBML/FBJS.

This is the JS I use to do this:

function getPicks(){
           var j;
        for(j=0; j<5; j++){
                
                var div=document.getElementById("li"+j);
                var image=div.childNodes[1];
                var imageID=image.getAttribute("id");
                var hiddenfield=document.getElementById("image"+j);
                hiddenfield.value=imageID;
                }
              
      }
      function gameTime(){
          getPicks();
          document.forms["submitChoice"].submit();
          publishWall();   
  }

and this is my PHP

<?php
$site_url = "xxxx";
$fb_page_url = "xxxx";
$numslides = 16;
$slidesvisible = 5;
$currentslide = 0;
$slidewidth = 95;
if (isset($_POST['image0'])) {
$image1=$_POST['image0'];
$image2=$_POST['image1'];
$image3=$_POST['image2'];
$image4=$_POST['image3'];
$image5=$_POST['image4'];
$imageArray=array($image1, $image2, $image3, $image4, $image5);
mysql_connect('xxxx','xxx','xx');
mysql_select_db('xxx');
$tablename="player_picks";
$sql="SELECT MAX(pick_ID) as pickID FROM $tablename";
$result=mysql_query($sql);
if($result){
$row=mysql_fetch_assoc($result);
if(is_null($row['pickID'])) {
$pick_ID=1;
}
else {
$pick_ID=intval($row['pickID'])+1;
}
}
for($i=0; $i<count($imageArray); $i++) {
$sql="INSERT INTO $tablename (pick_ID, pickImage) VALUES ($pick_ID, '".$imageArray[$i]."')";
$result=mysql_query($sql);
}
}
?>

It isn't sending any data to my table in MySQL when I click gametime in FB--but when I test the app on a random server page it does...

Here is the HTML

<!--THIS IS WHERE I STARTED THE USER'S PICKS-->
            <FORM METHOD="POST" ACTION="index.php" NAME="submitChoice">
            <INPUT TYPE="HIDDEN" ID="image0" NAME="image0" VALUE="none">
            <INPUT TYPE="HIDDEN" ID="image1" NAME="image1" VALUE="none">
            <INPUT TYPE="HIDDEN" ID="image2" NAME="image2" VALUE="none">
            <INPUT TYPE="HIDDEN" ID="image3" NAME="image3" VALUE="none">
            <INPUT TYPE="HIDDEN" ID="image4" NAME="image4" VALUE="none">
        </FORM>
        <!--END THE USER'S PICKS-->

Anyone know what I am doing wrong?

[Airshow]

Adand,

At least part of the problem might be :

function gameTime(){
    getPicks();
    document.forms["submitChoice"].submit();
    publishWall();
}

The line document.forms["submitChoice"].submit(); will submit conditional only on the document.forms["submitChoice"] not equating to null (in which case an error would be thrown).

Even if the form has an onsubmit handler (intended to inhibit submission if the form fails validation for example), it won't be called when the form is submitted with .submit() .

Therefore, the line publishWall() will never be reached.

If you need to do something else after form submission, then you have two choices:

• Use AJAX to send the form data (and handle the response from the server)
• Re-serve the page (or another page) with approprite content/functionality.

Airshow