Проблема?
Вы не препятствуете отправке формы, и браузер перезагружает страницу, стирая все введенные данные.
Случай 1
Базовая форма HTML содержит атрибут метода (обычно post или get) и атрибут действия (обычно имя файла скрипта для обработки формы).Если оно опущено или оставлено пустым, например, <form action="" method="get"> или <form method="post">, форма отправит содержимое обратно на ту же страницу и включит его.Такое поведение может быть желательным, так как оно обычно называется обратной передачей, однако для этого требуется, чтобы страница загружалась каждый раз при загрузке.Если вы не хотите обрабатывать форму на той же странице, на которой она существует, обязательно укажите страницу обработки в атрибуте действия или не отправляйте форму одним из следующих способов.
Случай 2
Вы создаете внутристраничное приложение, которое использует форму, например калькулятор, и вам не нужно отправлять форму, но всякий раз, когда вы нажимаете определенную кнопку,страница мигает, и вы не получите ожидаемого результата.
99% времени это происходит потому, что форма отправляется, когда вам нужно предотвратить событие отправки.Наиболее распространенными решениями этой проблемы являются возврат false из вашей функции обработки (return false) или предотвращение поведения по умолчанию для события submit (event.preventDefault).
Case 3
У вас есть форма без кнопки отправки, например, <input type="submit" /> или <button>Click here</button> в вашей форме, но она отправляется при нажатии кнопки.Здесь наиболее вероятный виновник - элемент <button>.Тип элемента кнопки по умолчанию - submit, и без указания другого типа, например <button type="button">, нажатие на элемент кнопки немедленно отправит вашу форму.
Случай 4
Нажатие на элемент в вашей форме, например, ссылка, кнопка, может вызвать другие события щелчка, связанные с вашей формой, далее по иерархии DOM.Если ваша форма прослушивает события более высокого уровня, чем элемент, по которому вы щелкаете, событие click будет всплывать в DOM, вызывая любые другие события щелчка.Этого можно избежать, используя stopPropagation() метод события .
Случай 5
Некоторые браузеры имеют странное поведение , котороедовольно старый , где форма с одним текстовым полем будет отправлена при нажатии клавиши ввода, когда она находится в фокусе.Это основано на очень старой спецификации , которая гласит:
Когда в форме только одно однострочное поле ввода текста, пользовательский агент должен принять Enter в этом полекак запрос на отправку формы.