Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Отправка формы (https://javascript.ru/forum/dom-window/60392-otpravka-formy.html)

serebann 26.12.2015 12:50

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

Deff 26.12.2015 14:07

serebann,
<input id="button" name="go" type="submit" class="button-x" value="Start">

serebann 26.12.2015 14:15

Цитата:

Сообщение от Deff (Сообщение 401446)
serebann,
<input id="button" name="go" type="submit" class="button-x" value="Start">

Но при запросах POST или GET страница обновляется и анимация не срабатывает.
Как быть?
Есть переменная $balance в сессии, я хочу значение из формы c name="bits" отнять из переменной $balance чтоб потом записать в базу данных.

Deff 26.12.2015 14:21

serebann, Чтобы страница не обновлялась:
нун отправлять форму аяксом, перехватывая клик, либо отправлять формы как обычно, но в скрытый фрейм (Что больше геммор, при последующем считывании из фрейма/если оно требуется/)

Dilettante_Pro 26.12.2015 16:12

А как вы на HTML+JS странице хотите достать переменную сессии?

serebann 26.12.2015 16:32

Цитата:

Сообщение от Dilettante_Pro (Сообщение 401480)
А как вы на HTML+JS странице хотите достать переменную сессии?

При авторизации пользователя, я все данные его из базы данных записываю в сессию.
Они доступны в любой момент.

Dilettante_Pro 26.12.2015 16:45

Доступны из HTML+JS?
Ну тогда просто сделайте нужные арифметические действия в вашей функции onclick перед запуском анимации

serebann 26.12.2015 18:03

Целый день промучился, и хрен что получилось с этим ...... ajaxom
Просрал весь день, с шикарным настроением ложусь спать...

Deff 26.12.2015 18:36

serebann,
Если ответ от сервера не Важен, можно отправить в скрытый фрейм, если Важен - лучше Аяксом, ибо всё одно от него не деться, ибо постоянно

Deff 26.12.2015 19:59

serebann,
А куда вывести ?
Ткните стрелками на скриншоте (Или селектор элемента)
Просто дописать в функции генерации ?
document.querySelector("Селектор").innerHTML = тут число ?;


Часовой пояс GMT +3, время: 17:07.