<table><form action="/roulette.php" name="ismForm" method="get">
<select id="selez3c" name="bet3c" size="1" class="selezionev" >
<option value="0.50">$0.50</option>
<option value="0.75">$0.75</option>
</select>
<input type="submit" id="bottone1" name="bottone1" value="Spin" onClick="startSpin(); copri();">
<input type="button" id="bottone2" name="bottone2" value="Check" onClick="ollo0()" style="display: none;">
</form></table>
Hi, i have this form, as you can see it has two button, a submit form one, and a simple button to execute a js. Here i have a really strange problem. When i click the first button on top website i only get /roulette.php?bottone1=Spin. SO i tried to remove the second button and it gone well. So i made another try, i deleted the id of second button, and i stated that it caused the problem. I tought ok, no problem, i dont need the second button id. After one day appens the most strange thing...i don't know why without touching anything else i got the error again, the select in not sent. SO i tried to remove parts of the second button and this time i stated that the problem was caused from the name, so i deleted name of the second button and i wrote again the id on second button, and it gone well, even if the solution was the opposite of day before. After few hours i got again the problem inverted. So i'm really really confused, first because the problem has no reason, second because it's not possible that a solution works only for few hours, until it wants, and without making changes it reverse the solution. It's completely no-sense. I tried to find people having issues with 2 buttons in a form, but never found my problem.
N.B. I also tried: to put the second button out of the form (i don't need in it, couse it's a simple button that execute a js); to use a button instead of an input. Both solutions didn't work.
UPDATE:
$("#bottone1").on("click", function() {
var $form = $("form#ismForm");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "POST";
$.ajax({
url: $form.attr("action"),
data: $form.serialize(),
type: method,
success: function() {
}
});
});
i arrived to write this, it works very well but i need one more thing, i need to send a js variable named winningSegment.text with my form, but i cant find a way to send both data at same time on roulette.php .
I tried to add the line $.post('roulette.php', {risultato: winningSegment.text});in theere, but obviously it executes &.ajax and $.post separately.
How can I solve?
UPDATE 2
<script>
$(function() {
$("#bottone1").on("click", function() {
var $form = $("form#ismForm");
var method = $form.attr("method") ? $form.attr("method").toUpperCase() : "POST";
$.ajax({
url: $form.attr("action"),
data: $form.serialize(),
type: method,
success: function() {
}
});
});
$("#bottone1").click(function(event) {
startSpin();
copri();
});
$("#buttone2").click(function(event) {
ollo0();
});
});
</script>
<div align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="power_controls">
<br />
<br />
<table class="power" cellpadding="10" cellspacing="0">
<tr>
<th align="center">Power</th>
</tr>
<tr>
<td width="78" align="center" id="pw3" onClick="powerSelected(3);">High</td>
</tr>
<tr>
<td align="center" id="pw2" onClick="powerSelected(2);">Med</td>
</tr>
<tr>
<td align="center" id="pw1" onClick="powerSelected(1);">Low</td>
</tr>
</table>
<br />
<img id="spin_button" src="/roulette/spin_off.png" alt="Spin" onClick="startSpin();" />
<form action="roulette.php" id="ismForm" name="ismForm" method="post">
<input type="hidden" name="giocato" value="si">
<input type="hidden" id="xddd" name="bottonex" value="Spin">
</select>
<table class="roulette" cellpadding="5" cellspacing="0" border="1">
<tr><td style="visibility: hidden;" align="center" colspan="2"></td><td class="roulettev" align="center" colspan="3">0<br/>
<select id="selez0" name="bet0" size="1" class="selezionev">
<option value="0">No Bet</option>
<option value="0.01">$0.01</option>
<option value="0.02">$0.02</option>
<option value="0.03">$0.03</option>
<option value="0.05">$0.05</option>
<option value="0.10">$0.10</option>
<option value="0.50">$0.50</option>
<option value="0.75">$0.75</option>
<option value="1">$1.00</option>
<option value="2">$2.00</option>
<option value="4">$4.00</option>
<option value="8">$8.00</option>
<option value="16">$16.00</option>
<option value="32">$32.00</option>
<option value="50">$50.00</option>
</select></td></tr>
<tr><td style="visibility: hidden;" align="center" colspan="2"></td><td align="center" colspan="3">
<input type="button" id="bottone1" name="bottone1" value="Spin">
<input type="button" id="bottone2" name="bottone2" value="Check" style="display: none;" onclick="mostrarisultato();">
<input type="hidden" id="winningSegment" name="winningSegment" />
</tr></td></table></form>
<br /><br />
<a href="#" onClick="resetWheel(); return false;">Play Again</a><br /> (reset)
</div>
</td>
<td width="438" height="582" class="the_wheel" align="center" valign="center">
<canvas id="canvas" width="434" height="434">
<p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
</canvas>
</td>
</tr>
</table>
<script>
// Create new wheel object specifying the parameters at creation time.
var theWheel = new Winwheel({
'numSegments' : 37,
'outerRadius' : 212,
'drawMode' : 'image',
'drawText' : false,
'textFontSize' : 28,
'segments' :
[
{'fillStyle' : '#eae56f', 'text' : '32'},
{'fillStyle' : '#89f26e', 'text' : '15'},
{'fillStyle' : '#7de6ef', 'text' : '19'},
{'fillStyle' : '#e7706f', 'text' : '4'},
{'fillStyle' : '#eae56f', 'text' : '21'},
{'fillStyle' : '#89f26e', 'text' : '2'},
{'fillStyle' : '#7de6ef', 'text' : '25'},
{'fillStyle' : '#7de6ef', 'text' : '17'},
{'fillStyle' : '#7de6ef', 'text' : '34'},
{'fillStyle' : '#7de6ef', 'text' : '6'},
{'fillStyle' : '#7de6ef', 'text' : '27'},
{'fillStyle' : '#7de6ef', 'text' : '13'},
{'fillStyle' : '#7de6ef', 'text' : '36'},
{'fillStyle' : '#7de6ef', 'text' : '11'},
{'fillStyle' : '#7de6ef', 'text' : '30'},
{'fillStyle' : '#7de6ef', 'text' : '8'},
{'fillStyle' : '#7de6ef', 'text' : '23'},
{'fillStyle' : '#7de6ef', 'text' : '10'},
{'fillStyle' : '#7de6ef', 'text' : '5'},
{'fillStyle' : '#7de6ef', 'text' : '24'},
{'fillStyle' : '#7de6ef', 'text' : '16'},
{'fillStyle' : '#7de6ef', 'text' : '33'},
{'fillStyle' : '#7de6ef', 'text' : '1'},
{'fillStyle' : '#7de6ef', 'text' : '20'},
{'fillStyle' : '#7de6ef', 'text' : '14'},
{'fillStyle' : '#7de6ef', 'text' : '31'},
{'fillStyle' : '#7de6ef', 'text' : '9'},
{'fillStyle' : '#7de6ef', 'text' : '22'},
{'fillStyle' : '#7de6ef', 'text' : '18'},
{'fillStyle' : '#7de6ef', 'text' : '29'},
{'fillStyle' : '#7de6ef', 'text' : '7'},
{'fillStyle' : '#7de6ef', 'text' : '28'},
{'fillStyle' : '#7de6ef', 'text' : '12'},
{'fillStyle' : '#7de6ef', 'text' : '35'},
{'fillStyle' : '#7de6ef', 'text' : '3'},
{'fillStyle' : '#7de6ef', 'text' : '26'},
{'fillStyle' : '#e7706f', 'text' : '0'}
],
'animation' :
{
'type' : 'spinToStop',
'duration' : 5,
'spins' : 8,
'callbackFinished' : 'alertPrize()'
}
});
var wheelImg = new Image();
wheelImg.onload = function()
{
theWheel.wheelImage = wheelImg;
theWheel.draw();
}
wheelImg.src = "http://ptcfrontier.com/images/roulette.png";
// Vars used by the code in this page to do power controls.
var wheelPower = 0;
var wheelSpinning = false;
// -------------------------------------------------------
// Function to handle the onClick on the power buttons.
// -------------------------------------------------------
function powerSelected(powerLevel)
{
// Ensure that power can't be changed while wheel is spinning.
if (wheelSpinning == false)
{
// Reset all to grey incase this is not the first time the user has selected the power.
document.getElementById('pw1').className = "";
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
// Now light up all cells below-and-including the one selected by changing the class.
if (powerLevel >= 1)
{
document.getElementById('pw1').className = "pw1";
}
if (powerLevel >= 2)
{
document.getElementById('pw2').className = "pw2";
}
if (powerLevel >= 3)
{
document.getElementById('pw3').className = "pw3";
}
// Set wheelPower var used when spin button is clicked.
wheelPower = powerLevel;
// Light up the spin button by changing it's source image and adding a clickable class to it.
document.getElementById('spin_button').src = "/roulette/spin_on.png";
document.getElementById('spin_button').className = "clickable";
}
}
// -------------------------------------------------------
// Click handler for spin button.
// -------------------------------------------------------
function startSpin()
{
// Ensure that spinning can't be clicked again while already running.
if (wheelSpinning == false)
{
// Based on the power level selected adjust the number of spins for the wheel, the more times is has
// to rotate with the duration of the animation the quicker the wheel spins.
if (wheelPower == 1)
{
theWheel.animation.spins = 3;
}
else if (wheelPower == 2)
{
theWheel.animation.spins = 8;
}
else if (wheelPower == 3)
{
theWheel.animation.spins = 15;
}
// Disable the spin button so can't click again while wheel is spinning.
document.getElementById('spin_button').src = "/roulette/spin_off.png";
document.getElementById('spin_button').className = "";
// Begin the spin animation by calling startAnimation on the wheel object.
theWheel.startAnimation();
// Set to true so that power can't be changed and spin button re-enabled during
// the current animation. The user will have to reset before spinning again.
wheelSpinning = true;
}
}
// -------------------------------------------------------
// Function for reset button.
// -------------------------------------------------------
function resetWheel()
{
theWheel.stopAnimation(false); // Stop the animation, false as param so does not call callback function.
theWheel.rotationAngle = 0; // Re-set the wheel angle to 0 degrees.
theWheel.draw(); // Call draw to render changes to the wheel.
document.getElementById('pw1').className = ""; // Remove all colours from the power level indicators.
document.getElementById('pw2').className = "";
document.getElementById('pw3').className = "";
wheelSpinning = false; // Reset to false to power buttons and spin can be clicked again.
}
// -------------------------------------------------------
// Called when the spin animation has finished by the callback feature of the wheel because I specified callback in the parameters.
// -------------------------------------------------------
function alertPrize()
{
// Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
var winningSegment = theWheel.getIndicatedSegment();
// Do basic alert of the segment text. You would probably want to do something more interesting with this information.
alert("You have won " + winningSegment.text);
$("#winningSegment").val( winningSegment.text );
$.ajax({
url: '/roulette.php',
data: $("#ismForm").serialize(),
type: 'POST',
success: function() {
}
});
}
</script>
This is a roulette, the first button sends the form, that include the selects that represent bets. The first button sends the bets to PHP, the PHP remove money from account balance equal to bets. When the script get the result, it sends automatically again the form cause the PHP need the bets again and the result at the same time to calculate the winning pot, and here is the problem. when it sends the form the second time it doesn't send the select, but only the new values (looks like it detects i already sent select values, so it thinks "don't need to send again", but i need them again). I saw that in the network page of chrome. I need to submit two times: i can't send only once because the result need time to get generated, and i need to remove money from balance when the user decides to spin/play. After the result is generated, i need to calculate the win, so i send again the form and the result. If i send only once both result and bet, when i get the result, the user could prevent the submit closing page when he see that the roulette is stopping on a result different from his one.
