I want my page to spit back the result from the PHP code w/o refreshing the page but it's redirecting me to the page. Everything seems fine to me but I'm obviously missing something.
HTML Code:
<html>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"> </script>
<script src="my_script.js" type="text/javascript"></script>
<form action="bet_process.php" method="POST" id="myForm">
<h2 class="title">Betting Settings<span class="line"></span></h2>
<div class="form-box">
<label for="bet">Bet Amount</label>
<input type="text" name="bet" id="bet" class="text" placeholder="Amount">
</div>
<div class="form-box">
<label for="pay">Multiplier </label>
<input type="text" class="text" name="pay" id="pay">
</div>
<div class="form-box last">
<label for="profit">Profit </label>
<input type="text" name="profit" id="profit" class="text" placeholder="Profit">
</div><!-- End Box -->
<div class="clearfix"></div>
<div class="form-box">
<label for="chance">Win Chance (%)</label><input type="text" name="chance" id="chance" class="text" value="50" placeholder="Win % - 50.5% Default">
</div>
<p>Slide to choose win chance or enter it in the input!</p><br><input type="range" id="chanceslider" class="vHorizon" step="0.01" min="0.01" max="98" style="background-color: #00aec8; width: 50%;">
</div>
<div class="form-box">
<input type="submit" name="start1" class="button medium color" value="Roll Dice" id="sub">
</div><!-- End Box -->
<span id="result"></span>
</div>
</form>
</body>
</html>
PHP Code:
<?php
require 'db.php';
$uid = $_SESSION['uid'];
$rand = rand(100, 10000)/100;
$select_gg_amt = mysql_query("SELECT * FROM `users` WHERE `username` = '$uid'");
$select_gg_row = mysql_fetch_array($select_gg_amt);
$balance = $select_gg_row['balance'];
$amount1 = $_POST['profit'];
$amount2 = $_POST['bet'];
$time_ago = date("F j, Y, g:i a");
if(isset($_POST['start1'])) {
if(isset($_POST['bet'], $_POST['pay'], $_POST['profit'], $_POST['chance'])) {
if($balance > 0 && $_POST['bet'] > 0) {
if($_POST['bet'] <= $balance) {
if($rand < $_POST['chance']) {
echo '<h3>You rolled a <strong>' .$rand. ' </strong> out of 100 on the percentile dice! You won!</h3>';
$result = 'Win';
mysql_query("UPDATE `users` SET `balance` = `balance` + '$amount1' WHERE `username` = '$uid'");
mysql_query("INSERT INTO `bets`(`amount`, `time_ago`, `username`, `multiplier`, `roll`, `result`) VALUES ('$amount2', '$time_ago', '$uid', '{$_POST['pay']}', '$rand', '$result')");
}
else if($rand > $_POST['chance']) {
echo '<h3>You rolled a <strong>' .$rand. '</strong> out of 100 on the percentile dice! You lost...</h3>';
$result = 'Loss';
mysql_query("UPDATE `users` SET `balance` = `balance` - '$amount2' WHERE `username` = '$uid'");
mysql_query("INSERT INTO `bets`(`amount`, `time_ago`, `username`, `multiplier`, `roll`, `result`) VALUES ('$amount2', '$time_ago', '$uid', '{$_POST['pay']}', '$rand', '$result')");
}
}
else { echo '<h3>You can only bet an amount you\'re capable of paying for!</h3>'; }
}
else if($amount2 > 0) { echo '<h3>You need to have a <strong>balance</strong> greater than 0 to bet. Sorry!</h3>'; }
}
}
?>
JavaScript Code:
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function() {
return false;
});
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
You really need to indent your code properly, otherwise it's almost unreadable.
Replace your javascript with:
$(function() {
$("#myForm").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url : $(this).attr('action'),
data: $(this).serialize()
}).done(function(info) {
$('#result').html(info);
}).fail(function(a,b,c) {
console.log('an error occured');
console.log(a);
console.log(b);
console.log(c);
});
$(":input", this).not('#sub').val('');
});
});
The submit event of the form would be the proper event, and as it's triggered when the submit button is clicked, you don't need an event handler for the button.
I added a fail() method, as it's hard for us to test your PHP and database stuff, but at least you'll get an error message if it fails ?
EDIT:
If that's your markup, exactly like in the question, you are missing the entire HEAD section, and the scripts are loaded in the BODY section.
You need to at least add the HEAD tags and a title.