Перенаправление на домашнюю страницу не работает после отправки формы

Question

У меня есть форма, и к ее кнопке «Отправить» прикреплена функция.

    <form class="form">
        <button class="btn" type="submit" onclick="submitItem()">Save</button>
    </form>

Моя submitItem() функция выглядит следующим образом:

function submitItem() {
    const url = 'http://localhost:3000/items';

    const data = {
      // input values here
    };

    const json = JSON.stringify(data);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

    xhr.send(json);

    window.location.replace('/index.html');
}

Запрос на публикацию работает - добавляется новый элемент, но window.location.replace('/index.html') не работает и оставляет меня на странице формы с отправленными данными в параметрах URL.

Answer 1

Поскольку ваш элемент кнопки находится внутри тега формы, при каждом нажатии кнопки форма будет вызывать событие отправки, поскольку тип кнопки - «отправить». Следовательно, страница обновляется. Это переопределит ваш window.location.replace ("/ index. html") и, таким образом, ничего не произойдет.

Одно из решений: удалить теги вмещающей формы .

Или включить onsubmit = "submitItem (); вернуть false» в тег , как показано ниже.

Не забудьте удалить onclick на кнопке.

 <form class="form" onsubmit="submitItem(); return false">
        <button class="btn" type="submit">Save</button>
    </form>