Помогите разобраться.
Есть страница с формой отправки значений, при нажатии на кнопку 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>