Оставайтесь в том же месте при отправке формы

Question

Когда я отправляю форму, страница переходит к началу страницы.

Я хочу остаться на том же месте.Есть ли способ сделать это?

Answer 1

Да, вместо использования отправки формы отправьте асинхронный запрос в JavaScript с использованием XHR. Чтобы привести конкретный пример, предположим, что у вас есть простая форма, которая выглядит следующим образом:

<form method="POST" action="/path/to/submit">
  <input id="input_name" name="input_name" type="text" value="value" />
</form>

При использовании XHR это может выглядеть примерно так (при использовании библиотеки Closure для XHR):

<script>
  goog.require('goog.net.XhrIo');
  var submitCompleted = function() {
     alert('Submitted!');
  };

  var submitAction = function() {
     var value = document.getElementById('input_name').value;
     goog.net.XhrIo.send(
       '/path/to/submit',
        submitCompleted,
       'POST',
       'input_name=' + encodeURIComponent(value));
  };
</script>

Я предполагаю, что вы по-прежнему сохраняете тот же элемент ввода, что и раньше, но вы определяете свою функцию onsubmit для вызова submitAction вместо использования поведения отправки по умолчанию для вашей формы.