3

I'm extremely new to this so please excuse my spaghetti code - I'm trying to make a webpage that keeps track of basketball statistics live during a game, and then saves the total statistics using php afterwards. For now, I just need to pass the variable that is being live updated from my html page to php at the press of a button. I'm pretty sure I'm not even close, but am getting the 'undefined index' message when trying this. Here is my html page:

<head> <meta charset="utf-8"> <title>Scoring</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> var points = 0; var assists = 0; var rebounds = 0; function add1point(){ points++; document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points; } function add2points(){ points = points + 2; document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points; } function add3points(){ points = points + 3; document.getElementById('displaypoints').innerHTML = '<p>Points: ' + points; } function add1assist(){ assists++; document.getElementById('displayassists').innerHTML = '<p>Assists: ' + assists; } function add1rebound(){ rebounds++; document.getElementById('displayrebounds').innerHTML = '<p>Rebounds: ' + rebounds; } </script> </head> <body> <center> <br> <button onclick="add1point()">+1 Point (Made Free-Throw)</button> <br> <br> <button onclick="add2points()">+2 Points (Made Field-Goal)</button> <br> <br> <button onclick="add3points()">+3 Points (Made Three-Pointer)</button> <br> <br> <br> <button onclick="add1assist()">+1 Assist</button> <br> <br> <br> <button onclick="add1rebound()">+1 (Offensive) Rebound</button> <br> <br> <button onclick="add1rebound()">+1 (Defensive) Rebound</button> <br> <br> <br> <br> <form method="post" attribute="post" action="scoring.php"> <div id="displaypoints"><script type="text/javascript">document.write('<p>Points: ' + points);</script></div> <div id="displayassists"><script type="text/javascript">document.write('<p>Assists: ' + assists);</script></div> <div id="displayrebounds"><script type="text/javascript">document.write('<p>Rebounds: ' + rebounds);</script></div> <br> <br> <br> <input type="submit" name="finish" id="finish" value="Finish Game"> </button> </form> </center> </body> </html>

And my php code:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Game Finished</title> </head> <body> <?php $points = $_POST['points']; $assists= $_POST['assists']; $rebounds = $_POST["rebounds"]; ?> </p> </body>

Any help at all would be greatly appreciated :)

Improve this question
2
  • Your form needs <input> fields called "points", "assists" and "rebounds" with the appropriate values. Commented Aug 5, 2017 at 1:06
  • @James Can you give an example of this? Commented Aug 5, 2017 at 1:23

2 Answers 2

Reset to default
1

I rewrote some parts of your code. I hope you don't mind :).

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scoring</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <center> <br> <button onclick="addPoints(1)">+1 Point (Made Free-Throw)</button> <br> <br> <button onclick="addPoints(2)">+2 Points (Made Field-Goal)</button> <br> <br> <button onclick="addPoints(3)">+3 Points (Made Three-Pointer)</button> <br> <br> <br> <button onclick="addAssists(1)">+1 Assist</button> <br> <br> <br> <button onclick="addRebounds(1)">+1 (Offensive) Rebound</button> <br> <br> <button onclick="addRebounds(1)">+1 (Defensive) Rebound</button> <br> <br> <br> <br> <form method="post" attribute="post" action="scoring.php"> <p>Points: <span id="displaypoints"></span></p> <p>Assists: <span id="displayassists"></span></p> <p>Rebounds: <span id="displayrebounds"></span></p> <!-- Any input element with "name" attribute will be sent to server (scoring.php script). --> <input type="hidden" name="points" id="points" /> <!-- Any input element with "name" attribute will be sent to server (scoring.php script). --> <input type="hidden" name="assists" id="assists" /> <!-- Any input element with "name" attribute will be sent to server (scoring.php script). --> <input type="hidden" name="rebounds" id="rebounds" /> <br> <br> <br> <input type="submit" name="finish" id="finish" value="Finish Game"> </form> </center> <script type="text/javascript"> // Initial values var points = 0; var assists = 0; var rebounds = 0; // Find "span" element with "displaypoints" id. $displayPoints = $("#displaypoints"); // Set element text to initial points value. $displayPoints.text(points); // Find "span" element with "displayassists" id. $displayAssists = $("#displayassists"), // Set element text to initial assists value. $displayAssists.text(assists); // Find "span" element with "displayrebounds" id. $displayRebounds = $("#displayrebounds"); // Set element text to initial rebounds value. $displayRebounds.text(rebounds); // Function that receives the amount of points. // 1. Adds received amount of points to current amount of points. // 2. Sets the corresponding element text to current amount of points. // 3. Sets the element that's going to be sent to server value to current amount of points. function addPoints(amount){ points += amount; $displayPoints.text(points); $("#points").val(points); } // Function that receives the amount of assists. // 1. Adds received amount of assists to current amount of assists. // 2. Sets the corresponding element text to current amount of assists. // 3. Sets the element that's going to be sent to server value to current amount of assists. function addAssists(amount){ assists += amount; $displayAssists.text(assists); $("#assists").val(assists); } // Function that receives the amount of rebounds. // 1. Adds received amount of rebounds to current amount of rebounds. // 2. Sets the corresponding element text to current amount of rebounds. // 3. Sets the element that's going to be sent to server value to current amount of rebounds. function addRebounds(amount){ rebounds += amount; $displayRebounds.text(rebounds); $("#rebounds").val(rebounds); } </script> </body> </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

As James' comment said you could do it easily by inputs in your form. I guess you do not want that the user may change the value at the finish of the game, so you could use input hidden, something like this:

<form method="post" action="scoring.php"> <div id="displaypoints"><script type="text/javascript">document.write('<p>Points: ' + points+'</p><input type="hidden" name="points" value="'+points+'">');</script></div> ... <input type="submit" name="finish" id="finish" value="Finish Game">

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.