Jump to content

Archived

This topic is now archived and is closed to further replies.

ultimatemonty

POSTing a form generated by AJAX/PHP...

Recommended Posts

I've been to the AJAXfreaks forums for help, and no one appears to be on there the past few days, so I'm pleading my case here and hoping for something that will get me headed in the right direction...

I'm working on a statistics tracking app for my ultimate frisbee team. Each individual stat entry consists of Total Goals, Layout Goals, Sky Goals, Assists, Total Defenses, Layout Ds,  Sky Ds , Total Blocks, Handblocks, Kickblocks. This set of stats is associated with a specific tournamentID, opponentID, and playerID so that we know who did what against which team in which tournament...all this is stored in a MySQL db.

I've been able to get AJAX/PHP working so that I can generate a list of tournaments. upon selected the tournament, a list of opponents comes up from that tournament, and upon selected an opponent, a form containg a list players that participated against that opponent shows up. The form code is as follows:

snippet from ajax.php
[code]function players()
{
  $tid = $_GET['tid'];
  $gid = $_GET['gid'];
  print("<form action=\"process.php?mode=stats\" name=\"myform\" method=\"POST\" enctype=\"text/plain\">");
  print("<input type=\"hidden\" name=\"tournament\" value=\"" . $tid . "\" />");
  print("<input type=\"hidden\" name=\"opponent\" value=\"" . $gid . "\" />");
  print("<h3>Input Player Stats</h3>");
  print("<table class=\"tracker\" cellspacing=\"0\">");
  print("<tr><th>Name</th><th colspan=\"3\">Goals</th><th>Assists</th><th colspan=\"3\">D's</th></tr>");
  print("<tr><th class=\"sub\">&nbsp;</th><th class=\"sub\">Total</th><th class=\"sub\">Layout</th><th class=\"sub\">Sky</th><th class=\"sub\">&nbsp;</th><th class=\"sub\">Total</th><th class=\"sub\">Layout</th><th class=\"sub\">Sky</th></tr>");

  // Get players from that tournament
  $statsQuery = "SELECT playerID FROM stats WHERE tournamentID='$tid' AND gameID='$gid'";
  $statsResult = mysql_query($statsQuery) or die('Could not execute query' . mysql_error());
  while ($statsRow = mysql_fetch_object($statsResult))
  {
      $pid = $statsRow->playerID;
      $playerQuery = "SELECT * FROM players WHERE playerID = '$pid'";
      $playerResults = mysql_query($playerQuery) or die('Could not execute query' . mysqk_error());
  //Table Loop with alternating table rows
      while($dbRow = mysql_fetch_object($playerResults))
      {
        if($color==1) {
            print("<tr class=\"d0\"");
            $color="2";
        }
        else {
        print("<tr class=\"d1\"");
        $color="1";
        }
        print("<td><input type=\"hidden\" name=\"player[$dbRow->playerID]\" value=\"$dbRow->playerID\">$dbRow->full_name</input></td>");
        print("<td><input type=\"text\" name=\"tgs[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"lgs[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"sgs[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"assists[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"tds[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"lds[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("<td><input type=\"text\" name=\"sds[$dbRow->playerID]\" size=\"5\" value=\"0\" /></td>");
        print("</tr>\n");
      }
    }
    print("</table><hr />");
    print("<button name=\"submit\" onClick=\"submitForm();\">Submit</button>");
    print("</form>");
}
[/code]

the javascript running all this is as follows:

tracker.js
[code]function createRequestObject() {
  var req;
  if(window.XMLHttpRequest){
      // Firefox, Safari, Opera...
      req = new XMLHttpRequest();
  } else if(window.ActiveXObject) {
      // Internet Explorer 5+
      req = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
      // There is an error creating the object,
      // just as an old browser is being used.
      alert('Problem creating the XMLHttpRequest object');
  }
  return req;

}

function handleDivTag(divtag)
{
  var divtag;
  return divtag;
}

// Make the XMLHttpRequest object
var http = createRequestObject();


// Create the Divtag Handler -- Mainly an IE 6 Fix
var divhandler = new handleDivTag(null);

/*
function sendRequest(act,id,divtag) {

  // Open PHP script for requests
  http.abort;
  http.open('post', 'ajax.php', true);
  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
  divhandler.divtag = divtag;
  http.send('act='+act);

}
*/

function sendRequest(act,tid,gid,divtag) {
  // Open PHP script for requests
  http.open('get', 'ajax.php?act='+act+'&tid='+tid+'&gid='+gid);
  http.onreadystatechange = handleResponse;
  divhandler.divtag = divtag;
  http.send(null);

}

function handleResponse() {

  if(http.readyState == 4 && http.status == 200){
 
      // Text returned FROM the PHP script
      var response = http.responseText;

      if(response) {
        // UPDATE ajaxTest content
        document.getElementById(divhandler.divtag).innerHTML = response;
      }

  }
}

function submitForm() {
  form.submit;
}[/code]

and the action for the form is as follows:

process.php
[code]<?php

include '../db.php';

$mode = $_GET['mode'];

if ($mode == "stats") {
  addStats();
} else if ($mode == "tournament") {
  addTournament();
} else if ($mode == "game") {
  addGame();
} else {
  echo 'Unauthorized variable passed. Please submit your form again.';
}

function addStats()
{
  foreach($_POST as $key => $item)
  {
      $key = $_POST[$key];
      echo $key . '<br />';
  }
}

?>[/code]

right now I'm just trying to echo the form data that's posted, but I get nothing. The submission does work, as if I just put in an echo 'This text'; statement, I get 'This text' printed on the screen, which tells me that the form data isn't getting sent to process.php. 

Any ideas as to why? I've done standard PHP form submission, but I wanted an AJAX approach to make the form more user friendly...if I need to back off of that and go back to just PHP, I will...

Share this post


Link to post
Share on other sites
i'm not an ajax expert, but after googling i found this page
http://www.devarticles.com/c/a/XML/XML-in-the-Browser-Submitting-forms-using-AJAX/4/
which should help you.

Share this post


Link to post
Share on other sites
In the first part of your code you named your form:
name="myform"

then in your function:
[quote]function submitForm() {
  [color=red]form[/color].submit;
}[/quote]

should be:[color=red] myform.submit();[/color]

Share this post


Link to post
Share on other sites
You're trying to post the form via Ajax, or are you just wanting to post the form normally?  If you want to post it like a normal page, then don't use js to submit it, use a submit button.  If you are trying to post using ajax, you will have to specify which form fields to post using js.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.