Как сделать при нажатии формы срабатывал ajax и отправляло на другую страницу?

Question

[Сергей]

Прописал чтоб срабатывал ajax и отправляло на другую страницу, не то и то не работает.

<form  action="word.php"  id="formex" method="POST"  onsubmit="process()">
<legend>Test From</legend>
<label for="name">Name:</label><input  value="" type="text">
<input value="Send" type="submit">
</form>

function process() {
      setTimeout(function() {
        var msgi   = $('#formex').serialize();
        $.ajax({
          type: 'POST',
          url: 'error.php',
          data: msgi,
          
        });
      'location.href="http://mysite.com/error.php"',
      return false;},
      6000);
}

Answer 1

[Сергей]

Сделал так и все как надо работает

function process() {
      setTimeout(function() {
        var msgi   = $('#formex').serialize();
        $.ajax({
          type: 'POST',
          url: 'error.php',
          data: msgi,
          success: function(data) {
            location="http://mysite.ru/503.php";
          },
          error:  function(xhr, str){
      alert('Возникла ошибка: ' + xhr.responseCode);
          }
        });
      return false;},
      6000);
}

Answer 2

[Юрий Костин]

На самом деле не очень понятно, чего вы хотите достичь.

Зачем вам ajax, если вы хотите перенаправить пользователя на другую страницу?
Оставьте тогда форму в покое и не добавляйте ей js обработчик.

Кстати не очень понятно, чего вы ждёте от строки:
'location.href="http://mysite.com/error.php"'

Или это такой способ комментирования?

Comments

[Сергей]

Пытаюсь сделать чтоб чтоб отправляло с задержкой на определенную страницу

[Юрий Костин]

Видимо, какой-то специфический кейс у вас.
Ну, тогда решения, указанные другими комментирующими должны быть вам впору.

document.getElementById('formex').addEventListener('submit', function (e) {
        e.preventDefault(); // Останавливаем дефолтное поведение - форма не отправляет POST запрос самостоятельно
        
        // Далее ваш код.
    })

Ну и чтобы избавить вас от боли: у ajax есть механизм callback-ов. Соответственно, вы можете прочитать на эту тему здесь api.jquery.com/jquery.ajax

[Сергей]

С аякс то понятно, а чтоб переводило на определенную страницу?
Это сделал, не работает.
document.forms['formex'].addEventListener('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'doprocess.php?action=sample1',
data: { name: "John", location: "Boston" }
});
location.href="mysite.com/error.php",
});

[Юрий Костин]

Это не работает по той причине, что вы не прочитали, как использовать callback функции.

Полагаю, что стоит вам нажать на кнопку, как вас сразу переводит на требуему страницу, я прав?

Answer 3

[dummyman]

у вас проблема не в том, что не срабатывает аякс, он может то, если успеет, может и сработать... просто вы не отменяете стандартных обработчиков форм.

document.querySelector("form#formex").addEventListener('submit', function(e) {
e.preventDefault();
e.stopPropagation();
// ...
// дальше свой код
});

Писал по памяти могут быть очепятки.

Comments

[Евгений Тройнов]

В данном случае e.stopPropagation() будет лишним.

[Юрий Костин]

Разве что лучше просто `document.getElementById('formex')`

Answer 4

[Евгений Тройнов]

Лучше так:

document.forms['formex'].addEventListener('submit', function(e) {
  e.preventDefault();
  // ...
});

Comments

[dummyman]

, jquery :
$("#formex").bind("submit", process, false)