CODEWITHSUNDEEP
phpjavascripthtmlajaxfunction
John Doe
John Doe

Reputation: 2060

AJAX PHP connection to insert row into DB

THis is kind of complicated to explain and I don't know if you guys will be able to help me, but I will do my best. Here is the process I want the user to go through:::

  1. User clicks on img (id='cowboys' or 'giants')
  2. onclick triggers function 'teamback' and has 'this' passed to it (so far so good, here is where I need to use ajax to connect to the db and insert the info)
  3. function needs to take userid(session variable), tn, and sc and use ajax to insert them
    into database

The ajax part of the code is where I don't know what to do bc i have never used ajax. I'm pretty sure I messed up the GET part. The problem is it isn't working. It's not inserting anything into the table. Because my ajax code is messed up in the teamback function and makepick.php file (i think). Any help setting this up would be appreciated!!

Here is the html document...

<?php
 // this starts the session 
 session_start();
 $id = $_SESSION['userid'];

 //this connects to the database
$con = mysql_connect("localhost","yourfan3_jeengle","armyjoe30");
mysql_select_db("yourfan3_demo", $con);

//**THIS IS THE VARIABLE THAT MANUALLY SETS THE PICKS POSSIBLE
$maxcorrectpicks = 16;

 //gets info for user
 $result = mysql_query("SELECT * FROM League_Info WHERE User_ID = '$id'");  
 $result2 = mysql_fetch_array($result);
 $leaguename = $result2['League'];

 //checks if league name exists
 $memberslist = mysql_query("SELECT User_ID, Correct_Picks, Points FROM League_Info WHERE League = '$leaguename'"); 
 ?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
        <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
        <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="icon" href="http://www.indiana.edu/favicon.ico" />
        <title>Your</title>
        <link rel="stylesheet" type="text/css" href="yourteamstyle.css" />

        <script type="text/javascript">
        //this is the user id session stored as a javascript variable
        var userid = "<?=$id?>";

        // Popup window code
        function newPopup(url) {
            popupWindow = window.open(url,'popUpWindow','height=450,width=600,left=10,top=10,resizable=no,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
        }
        function bigimg(x) {
            var myDate = new Date(); // Your timezone! 
            var myEpoch = myDate.getTime()/1000; 
            var deadline = '1344700055.000'; 
                //determines if user was on time..if not on time hover enlarge won't work
                if(myEpoch < deadline) {
                    x.style.height="65px";
                    x.style.width="85px";
                    x.style.opacity="0.5";
                } else {}
        }
        function defaultimg(x) {
            x.style.height="60px";
            x.style.width="80px";
            x.style.opacity="1.0";
        }
        function teamback(x) {
            var myDate = new Date(); // Your timezone! 
            var myEpoch = myDate.getTime()/1000; 
            var deadline = '1344700055.000';
                //determines if user was on time..if not on time submitting won't work
                if(myEpoch > deadline) {
                    // update the "actualone" image's source to the sending-image's source
                    var tn = x.id;
                    var sc = x.name;
                    document.getElementById("actualone").src = x.src;
                    document.getElementById("curtime").innerHTML = myEpoch;
                    document.getElementById("team").innerHTML = x.id;
                    document.getElementById("scenario").innerHTML = x.name;

                    //this is the ajax part where I am having trouble
                    if (window.XMLHttpRequest) {
                        // code for IE7+, Firefox, Chrome, Opera, Safari
                        xmlhttp=new XMLHttpRequest();
                    } else {
                        // code for IE6, IE5
                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp.onreadystatechange=function() {
                    }
                    xmlhttp.open("GET","makepick.php?newuserid="+userid, true);
                    xmlhttp.open("GET","makepick.php?newtn="+tn, true);
                    xmlhttp.open("GET","makepick.php?newsc="+sc, true);
                    xmlhttp.send();

                } else {}           
        }
        </script>

    </head>
        <body>
            Your Team<br>
            <iframe style="background-color:red;" src="http://free.timeanddate.com/countdown/i38ik9yz/n417/cf12/cm0/cu4/ct1/cs1/ca0/co1/cr0/ss0/cac000/cpc000/pct/tc66c/fs100/szw320/szh135/tatTime%20Remaining%20to%20Make%20Picks/tac000/tptTime%20since%20Event%20started%20in/tpc000/iso2012-08-11T13:00:00" frameborder="0" width="236" height="36"></iframe>

            <br><img id="cowboys" name="One" onmouseover="bigimg(this)" onclick="teamback(this)" onmouseout="defaultimg(this)" src="cowboys.gif"> vs <img id="giants" name="One" onmouseover="bigimg(this)" onclick="teamback(this)" onmouseout="defaultimg(this)" src="giants.gif"><img src="" id="actualone" style="width:85px; height:65px;"><br><br>
            <div id="curtime">44</div>|||<div id="deadline"></div><br><div id="team">Team</div><div id="scenario">Scenario</div>


        </body>
</html>

And here is the makepick.php file

<?php
$userid = $_GET["newuserid"];
$tn = $_GET["newtn"];
$sc = $_GET["newsc"];

//this connects to the database
$con = mysql_connect("localhost","yourfan3_jeengle","armyjoe30");
mysql_select_db("yourfan3_demo", $con);

mysql_query("INSERT INTO Week1_Picks_Test (UserID, '$sc') VALUES ('$userid', '$tn')");

?>

Upvotes: 2

Views: 732

Answers (3)

scotsninja
scotsninja

Reputation: 109

Something I noticed right off the bat: The query you are performing in the AJAX processing has the $sc variable in single-quotes ('). Since this is a column name, it will generate a syntax error. Either remove the quotes, or use backticks (`).

That said, you should consider sanitizing the input before passing it to the database or, even better, using prepared statements with PDO: http://php.net/manual/en/book.pdo.php

Upvotes: 1

bpatel
bpatel

Reputation: 391

Since, you are using Jquery I would suggest you to rewrite your teamback() function to use jquery's ajax method:

function teamback(x) {
var myDate = new Date(); // Your timezone! 
var myEpoch = myDate.getTime()/1000; 
var deadline = '1344700055.000';
    //determines if user was on time..if not on time submitting won't work
    if(myEpoch > deadline) {
        // update the "actualone" image's source to the sending-image's source
        var tn = x.id;
        var sc = x.name;
        document.getElementById("actualone").src = x.src;
        document.getElementById("curtime").innerHTML = myEpoch;
        document.getElementById("team").innerHTML = x.id;
        document.getElementById("scenario").innerHTML = x.name;

        $.ajax({
          type: 'GET',
          url: 'makepick.php',
          data: { newuserid: userid, newtn: tn, newsc:sc },

          success:function(data){
            //do whatever you want to do here on successful submission
            alert('success');
          },
          error:function(){
            //do whatever you want to do here when an error occurs
            alert('error');
          }
        });
    } else {}

}

Upvotes: 2

Tim
Tim

Reputation: 792

I am not sure what your problem is, but it is worth reading about SQL injections. http://www.tizag.com/mysqlTutorial/mysql-php-sql-injection.php is OK for starters.

Upvotes: 0

Related Questions