How to convert live javascript variables to php variables?
Question
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 :)
2 answers
solution1
1 2017-08-05 01:25:39
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">
solution2
1 ACCPTED 2017-08-05 01:31:21
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I convert PHP variables to JavaScript variables?
How long local(function) variables live in javascript
How to pass javascript variables to php variables with yii
How to pass JavaScript variables to PHP variables?
How to use php variables in javascript
How run JavaScript with PHP variables
How to pass JavaScript variables to PHP?
How to pass variables in javascript to PHP
How to get JavaScript variables in PHP?
Sending php variables to Javascript variables
Related Tags