First timeAjax form submission

[chinds]

 

1down votefavorite

 

I have been building a bowling score calculator.

The calculator itself works but you must enter all scores in the form at once and then it will calculate the total score.

I wanted it to loop form the form to enter your score for each frame, submit the form show the current score and reload the form again for the next frame.

This is the first time I have used ajax and followed a tutorial on how to submit a form via ajax but it does not seem to be working.

This is the first time I have used ajax, the ajax code is form an online tutorial I have followed and have not been able to get it working yet.
 

The two scripts are below.

PHP Script:

<?php
session_start(); 
//start a new game
if (isset($_GET["endGame"]) && $_GET["endGame"] == 'yes') {
session_destroy();
//redirect to homepage and remove any get parameters
$location="http://localhost/bbc/v8.php";
echo '<META HTTP-EQUIV="refresh" CONTENT="0;URL='.$location.'">';
}

//Check if the number of players has been set
if (isset($_POST['next'])) {
//Determine thye number players
foreach ($_POST['numberOfPlayers'] as $player) {
$_SESSION['numberOfPlayers'] = $player;
$location="http://localhost/bbc/v8.php";
echo '<META HTTP-EQUIV="refresh" CONTENT="0;URL='.$location.'">';
}
//check number of players has been set before enter player names
} elseif (isset($_SESSION['numberOfPlayers'])) {
$numberOfPlayers = $_SESSION['numberOfPlayers'];

if (!isset($_POST['playerSubmit']) || (isset($_POST['scores']))) {
?>
<!-- Form to enter the playes names -->
<form method="post" action="">
<fieldset>
<?php
$x = 1;
echo '<div class="custTitle"><h3>Enter player names below</h3></div>';
while ($x <= $numberOfPlayers) {
echo '<input class="form-control" type="text" name="players[]" placeholder="Player ' . $x . '">';
$x++;
}

?>
</fieldset>
<input type="submit" name="playerSubmit" value="Start Game">
</form>

<?php
}// close if
}

if (isset($_POST['playerSubmit'])) {

$players = array();
foreach ($_POST['players'] as $player) {
$players[] = $player;
}

// save player names array to session for reuse
$_SESSION['players'] = $players;
}

//Check player name have been submitted
if(isset($_POST['playerSubmit']) || isset($_SESSION['players'])) {

//create global variable of players array
$players = $_SESSION['players'];

$_SESSION['frameScore'] = array(0);
$frameCount = 1;
while ($frameCount <=9 ) {

?>
<!-- Form to enter players score-->
<form method="post" action="" class="ajax">
<?php
$i = 0;
while($i < $_SESSION['numberOfPlayers']){

echo '<fieldset>';
echo '<h3>' . $players[$i] . '</h3>';

$x=1;
// loop the form 21 times for maximum of 21 throws
while($x <= 3){
?>
<label>Throw, <?php echo $x; ?></label>
<select class="form-control" name="score[<?php echo $i; ?>][<?php echo $x; ?>]">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">X</option>
</select>
<?php
$x++;
}// close 21 throws while
?>
<input type="hidden" name="player[<?php echo $i; ?>]" value="<?php echo $players[$i] ?>">
</fieldset>

<?php
$i++;
}// close while for looping throuhg players
?>
<input type="submit" value="Finish Game" name="scores"/>
</form>
<?php 
// close player submit if

// check if any scores have been submitted
if(isset($_POST['score'])) {
$i = 0;
$result = [];
foreach($_SESSION['players'] as $name) {
$result[$name] = $_POST['score'][$i];
$pins = $_POST['score'][$i];
$game = calculateScore($i, $pins);
$i++;
}

}

$frameCount++;
}// close do while

// if number of players is not yet set the show the form to select number of players
} else {

?>
<!-- Form to select the number players -->
<h2>How many players will be bowling?</h2>

<form method="post" action="">
<select class="form-control" name="numberOfPlayers[]">
<option name="numberOfPlayers[]" value="1">1</option>
<option name="numberOfPlayers[]" value="2">2</option>
<option name="numberOfPlayers[]" value="3">3</option>
<option name="numberOfPlayers[]" value="4">4</option>
<option name="numberOfPlayers[]" value="5">5</option>
<option name="numberOfPlayers[]" value="6">6</option>
</select>
<input type="submit" name="next" value="Next">
</form>
<?php

}// close else

// if the number of players has been set show a 'New Game' button
if (isset($_SESSION['numberOfPlayers'])) {
echo '<button class="btn_lrg"><span><a href="http://localhost/bbc/v8.php?endGame=yes">New Game</a></span></button>';
}

// function to calculate the players scores
function calculateScore($player, $pins) {
global $players;
$frame = 0;
// create an array for the frame score
//$frameScore = $_SESSION['frameScore'];
//$frameScore = array(0);
//loop for 10 frames of a game
while ($frame <=9) {

$_SESSION['frameScore'][$frame] = array_shift($pins);

//Check for a strike
if($_SESSION['frameScore'][$frame] == 10) {

$_SESSION['frameScore'][$frame] = (10 + $pins[0] + $pins[1]);
// No strike, so take in two throws 

} else {

$_SESSION['frameScore'][$frame] = $_SESSION['frameScore'][$frame] + array_shift($pins);

//Check for a spare
if($_SESSION['frameScore'][$frame] == 10) {
$_SESSION['frameScore'][$frame] = (10 + $pins[0]);
}

}// close if

//Move to the next frame and loop again 
$frame++;
}// close while

//echo out player scoreborad
echo '<h3>' .$_SESSION["players"][$player]. '</h3>' . '<h4>' . array_sum($_SESSION['frameScore']) . '</h4>';
}// end calculateScore function

?>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="main.js"></script>
<!-- End Bowling Calculator Script -->

JavaScript/Ajax:

$('form.ajax').on('submit', function() {

var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};

that.find('[name]').each(function(index, value) {

var that = $(this),
name = that.attr('name'),
value = that.val();

data[name] = value;

});

$.ajax({
url: url,
type: type,
data: data,
});

return false;

});

Edited February 20, 2015 by chinds

[mac_gyver]

the point of ajax is for your main page to make requests to the server to either post data or get information to display on the page without refreshing the entire page.

 

to do this, your first step will need to be to organize the logic on the page so that the there are distinct sections of code for producing the main page and for processing post and get ajax requests (and actually your get request to start a new game, since it modifies data on the server, should be handled as a post request.)

 

it is actually possible to have one set of code work both with and without javascript/ajax. the only real difference is with javascript/ajax (there's a header in the request you can test to detect an ajax request), your php code would output the data back to the browser for the browser to display it, vs producing the finished html on the server and the php code outputting the html when the page is requested.

 

i would also recommend a different layout for your main table, something like -