Jump to content
Sign in to follow this  
chinds

First timeAjax form submission

Recommended Posts

 

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 by chinds

Share this post


Link to post
Share on other sites

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 -

 

post-144491-0-49198500-1424533706_thumb.png

 

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

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.