Отправка формы
Помогите разобраться.
Есть страница с формой отправки значений, при нажатии на кнопку START срабатывает анимация, но мне ещё нужно отправить значения из этой формы одновременно, пока одно значение. Пробовал и POST И GET запросы но значения не отправляются, наверно потому что на кнопку навешено действие для старта анимации, а как сделать чтоб и анимация срабатывала и параметры отправлялись. Планировал записывать значения в базу данных. Мне нужно чтоб страница не обновлялась, то есть средствами javascript Вот собственно пример: Похоже мне ajax нужен, но я в нём не бум бум..
<?php require_once "session.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://js.cx/libs/animate.js"></script>
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#gammes {
text-align: left;
}
}
#path {
outline: 1px solid #E8C48E;
width: 800px;
height: 20px;
}
</style>
</head>
<body>
<table width="800" border="0" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="shadow">
<tbody>
<td align="center">
<div id="gammes">
<div id="path">
<div id="brick"></div>
<br />
</div>
<script>
window.onload = function(){
document.getElementById('button').onclick = function() {
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min)
rand = Math.round(rand);
return rand;
}
var sum = ( randomInteger(0, 750) );
animate({
duration: 1000,
timing: function(timeFraction) {
return Math.pow(timeFraction, 2);
},
draw: function(progress) {
brick.style.left = progress * sum + 'px';
}
});
};
}
</script>
</div><br /><br />
<div class="footer text-center col-xs-12 ">
<form method="GET" action="" class="form-horizontal" role="form">
<input type="text" name="bits" value="1"><br /><br />
<input id="button" name="go" type="button" class="button-x" value="Start">
</form>
</div>
</td>
</tr>
</tbody></table>
</body></html>
|
serebann,
<input id="button" name="go" type="submit" class="button-x" value="Start"> |
Цитата:
Как быть? Есть переменная $balance в сессии, я хочу значение из формы c name="bits" отнять из переменной $balance чтоб потом записать в базу данных. |
serebann, Чтобы страница не обновлялась:
нун отправлять форму аяксом, перехватывая клик, либо отправлять формы как обычно, но в скрытый фрейм (Что больше геммор, при последующем считывании из фрейма/если оно требуется/) |
А как вы на HTML+JS странице хотите достать переменную сессии?
|
Цитата:
Они доступны в любой момент. |
Доступны из HTML+JS?
Ну тогда просто сделайте нужные арифметические действия в вашей функции onclick перед запуском анимации |
Целый день промучился, и хрен что получилось с этим ...... ajaxom
Просрал весь день, с шикарным настроением ложусь спать... |
serebann,
Если ответ от сервера не Важен, можно отправить в скрытый фрейм, если Важен - лучше Аяксом, ибо всё одно от него не деться, ибо постоянно |
serebann,
А куда вывести ? Ткните стрелками на скриншоте (Или селектор элемента) Просто дописать в функции генерации ?
document.querySelector("Селектор").innerHTML = тут число ?;
|
Я с этим уже справился, мне нужно сейчас загнать значение с формы name="bits" в переменную
|
var bits = document.querySelector('form.form-horizontal input[name="bits"]').value
|
Цитата:
var bits = document.querySelector('form.form-horizontal input[name="bits"]').value; Всё работает, может ошибка где то здесь.
<?php require_once "session.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://js.cx/libs/animate.js"></script>
<?php require_once "block/head.php";?>
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#gammes {
text-align: left;
}
#path {
outline: 1px solid #E8C48E;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<table width="800" border="0" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="shadow">
<tbody><?php require_once "block/header.php";?>
<tr>
<td align="center"><table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td id="tab-left"> </td>
<td id="tab-middle">Play Free Spin & Win Bitcoin Game</td>
<td id="tab-right"> </td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td align="center">
<span class="startText">Game Balance: </span> <span id="gamebal" class="important2">3819430 Bits</span>
<br>
<span class="startText">Your Balance: </span> <span id="userbal" class="important2"><?php echo $balance;?> Bits</span>
<br><br>
<span class="game-donate-text">Game Balance Direct Deposit: 37JSSzhMBe88vPQf9ZTbAt8qCJa7bxbmiw<br>
(Requires 1 network confirmations before balance is credited - min: 0.001 BTC)</span></td>
</tr>
<tr>
<td align="center"><span class="important2"><h1 id="result">?</h1></span></td>
</tr>
<tr>
<td align="center">
<div id="gammes">
<div id="path">
<div id="brick"></div>
<form method="post" id="ajax_form" action="">
<div>
<span class="important2">0</span>
<span class="important2">25</span>
<span class="important2">50</span>
<span class="important2">75</span>
<span class="important2">100</span>
</div>
</div>
<script>
window.onload = function(){
document.getElementById('button').onclick = function() {
var bits = document.querySelector('form.form-horizontal input[name="bits"]').value;
document.getElementById('userbal').innerHTML=bits;
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min);
rand = Math.round(rand);
return rand;
}
var sum = ( randomInteger(0, 100) )
document.getElementById('result').innerHTML=sum;
animate({
duration: 1000,
timing: function(timeFraction) {
return Math.pow(timeFraction, 2);
},
draw: function(progress) {
brick.style.left = progress * sum + '%';
}
});
};
}
</script>
</div><br /><br />
<div class="footer text-center col-xs-12">
<input id="bits" name="bits" type="text" class="button-x" value="1"><br /><br />
<br />
<input id="button" name="go" type="button" class="button-x"value="Start" >
</form>
</div>
</div>
</td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center"><span class="info-title">Your Bitcoin Game Referral URL:</span><br>
<span class="info-text">Share this link with your friends and earn 10% referral commission on all bitoin game winnings!<br>
http://Payforyou.top/?r=Your_Bitcoin_Address</span></td>
</tr>
<?php require_once "block/footer.php";?>
</tbody></table>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70355115-1', 'auto');
ga('send', 'pageview');
</script>
</body></html>
|
Вы же сменили код формы !
Теперь наверно
var bits = document.querySelector('#ajax_form input[name="bits"]').value
|
Цитата:
<?php require_once "session.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://js.cx/libs/animate.js"></script>
<?php require_once "block/head.php";?>
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#gammes {
text-align: left;
}
#path {
outline: 1px solid #E8C48E;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<table width="800" border="0" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="shadow">
<tbody><?php require_once "block/header.php";?>
<tr>
<td align="center"><table border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td id="tab-left"> </td>
<td id="tab-middle">Play Free Spin & Win Bitcoin Game</td>
<td id="tab-right"> </td>
</tr>
</tbody></table></td>
</tr>
<tr>
<td align="center">
<span class="startText">Game Balance: </span> <span id="gamebal" class="important2">3819430 Bits</span>
<br>
<span class="startText">Your Balance: </span> <span id="userbal" class="important2"><?php echo $balance;?> Bits</span>
<br><br>
<span class="game-donate-text">Game Balance Direct Deposit: 37JSSzhMBe88vPQf9ZTbAt8qCJa7bxbmiw<br>
(Requires 1 network confirmations before balance is credited - min: 0.001 BTC)</span></td>
</tr>
<tr>
<td align="center"><span class="important2"><h1 id="result">?</h1></span></td>
</tr>
<tr>
<td align="center">
<div id="gammes">
<div id="path">
<div id="brick"></div>
<form method="post" id="ajax_form" action="">
<div>
<span class="important2">0</span>
<span class="important2">25</span>
<span class="important2">50</span>
<span class="important2">75</span>
<span class="important2">100</span>
</div>
</div>
<script>
window.onload = function(){
document.getElementById('button').onclick = function() {
var balanc = '<?php echo $balance;?>';
var newbalance = balanc - bits;
document.getElementById('userbal').innerHTML=balanc;
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min);
rand = Math.round(rand);
return rand;
}
var sum = ( randomInteger(0, 100) )
document.getElementById('result').innerHTML=sum;
animate({
duration: 1000,
timing: function(timeFraction) {
return Math.pow(timeFraction, 2);
},
draw: function(progress) {
brick.style.left = progress * sum + '%';
}
});
};
}
</script>
</div><br /><br />
<div class="footer text-center col-xs-12">
<input id="bits" name="bits" type="text" class="button-x" value="1"><br /><br />
<table align="center">
<tr>
<td>
<select>
<option type="text" name="m25">Less than 25 Profit 3x</option>
<option type="text" name="m50">Less than 50 Profit 2x</option>
<option type="text" name="b50">More than 50 Profit 2x</option>
<option type="text" name="b75">More than 75 Profit 3x</option>
</select>
</td>
</tr>
</table>
<br />
<input id="button" name="go" type="button" class="button-x"value="Start" >
</form>
</div>
</div>
</td>
</tr>
<tr>
<td align="center"> </td>
</tr>
<tr>
<td align="center"><span class="info-title">Your Bitcoin Game Referral URL:</span><br>
<span class="info-text">Share this link with your friends and earn 10% referral commission on all bitoin game winnings!<br>
http://Payforyou.top/?r=Your_Bitcoin_Address</span></td>
</tr>
<?php require_once "block/footer.php";?>
</tbody></table>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-70355115-1', 'auto');
ga('send', 'pageview');
</script>
</body></html>
|
Вот с этой строчкой всё работает
var bits = document.getElementById("bits").value; |
Вот так тож работает:
document.querySelector('input[name="bits"]').value)
Чот составной селектор не переваривает ... |
Подскажите ,как мне при отправке формы понять какой пункт из <select> пользователь выбрал?
В зависимости от того какой пункт пользователь выбрал я буду производить те или иные арифметические действия. Например: если выбрано 25 тогда я проверяю с генерированное число и если оно меньше тогда значение из поля name="bits" я умножаю на 3, прибовляю к балансу пользователя и отнимаю из общего баланса(Game Balance:) А уже после буду пробовать изменять значения в базе данных MYSQL , но это потом ,сначала разобраться бы с формой: Я решил отбросить базу данных в сторону и сосредоточится только только на одной странице http://payforyou.top/limit.php все данные должны меняться онлайн на этой странице, а если пользователь уйдёт с неё тогда все данные вернутся в исходные значения, т.е. Game Balance и Your Balance, не могу понять как определить какой пункт в форме из <select> пользователь выбрал! <<< - вот это нужно и всё пока!
<?php require_once "session.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://js.cx/libs/animate.js"></script>
<style>
#brick {
width: 10px;
height: 20px;
background: #EE6B47;
position: relative;
cursor: pointer;
}
#gammes {
text-align: left;
}
#path {
outline: 1px solid #E8C48E;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<table width="800" border="0" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center" class="shadow">
<tbody>
<tr>
<td align="center">
<span class="startText">Game Balance: </span>
<span id="gamebal" class="important2">3819430</span>
<span id="gamesbits" class="important2">Bits</span>
<br>
<span class="startText">Your Balance: </span>
<span id="userbal" class="important2"><?php echo $balance;?></span>
<span id="gamesbits" class="important2">Bits</span>
<br><br>
</td>
</tr>
<tr>
<td align="center"><span class="important2"><h1 id="result">?</h1></span></td>
</tr>
<tr>
<td align="center">
<div id="gammes">
<div id="path">
<div id="brick"></div>
<form method="post" id="ajax_form" action="">
</div>
<script>
window.onload = function(){
document.getElementById('button').onclick = function() {
var balanc = '<?php echo $balance;?>';
var gamebalanc = "3819430";
var stavka25 = document.getElementById("stavka25").value;
var stavka50 = document.getElementById("stavka50").value;
var stavka51 = document.getElementById("stavka51").value;
var stavka75 = document.getElementById("stavka75").value;
var bits = document.getElementById("bits").value;
if (balanc > bits) {
var newbalance = balanc - bits;
var newgamebalanc = gamebalanc - bits;
}
<?php $_SESSION['balance'] = $balance;?>
document.getElementById('gamebal').innerHTML=newgamebalanc;
document.getElementById('userbal').innerHTML=newbalance;
function randomInteger(min, max) {
var rand = min + Math.random() * (max - min);
rand = Math.round(rand);
return rand;
}
var sum = ( randomInteger(0, 100) )
document.getElementById('result').innerHTML=sum;
animate({
duration: 1000,
timing: function(timeFraction) {
return Math.pow(timeFraction, 2);
},
draw: function(progress) {
brick.style.left = progress * sum + '%';
}
});
};
}
</script>
</div><br /><br />
<div class="footer text-center col-xs-12">
<input id="bits" name="bits" type="text" class="button-x" value="1" size="5px"><br /><br />
<table align="center">
<tr>
<td>
<select>
<option id="stavka25" type="text" name="st" value="25">Less than 25 Profit 3x</option>
<option id="stavka50" type="text" name="st" value="50">Less than 50 Profit 2x</option>
<option id="stavka51" type="text" name="st" value="51">More than 50 Profit 2x</option>
<option id="stavka75" type="text" name="st" value="75">More than 75 Profit 3x</option>
</select>
</td>
</tr>
</table>
<br />
<input id="button" name="go" type="button" class="button-x"value="Start" >
</form>
</div>
</div>
</td>
</tr>
</tbody></table>
</body></html>
|
Разобрался.
|
| Часовой пояс GMT +3, время: 09:20. |