Кнопка Стоп Отправить, чтобы обновить страницу

Question

У меня есть тег <form>, который имеет 2 кнопки и 2 текстовых поля. У меня есть и другие элементы управления в моей форме.

Ниже приведен тег формы:

<form>
  <input id="Text1" type="text" name="locationText" />
  <input id="Button1" type="submit" value="Search Location" />

  <input id="Text2" type="text" name="refText" />
  <input id="Button2" type="submit" value="Search Ref" />
</form>

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

Я бы хотел выполнить оба поиска без обновления страницы. Любое предложение или помощь будут оценены.

Как я могу предотвратить это? Спасибо!

EDIT:

Страница обновляется на втором изображении.

---

Answer 1

Если вы используете javascript, вам не нужно использовать тег формы, вы можете использовать кнопки onclick event.

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

1- Измените type=submit на type=button

2- Используйте это в своей форме: <form onsubmit="return false;">

Answer 2

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

Пример кода:

<form onsubmit="event.preventDefault();">
</form>

Надеюсь, это поможет!