Получение данных из инпута без перезагрузки JS

Web Frontend: JavaScript, HTML/CSS
#1

Всем доброго времени суток. продолжаю покорять JS, но немного запутался в каком направлении копать…

Есть поле ввода input type=‘text’; задача по нажатию на submit, присваивать данные из инпута в переменную, для дальнейшей работы. НО без перезагрузки\обновления страницы.
На сколько я понял в этом может помочь ajax.
Но на сколько понял Ajax передает данные в php или в json файл, и после его нужно подтягивать.
Верный ли это способ? можно ли добиться отсутствия перезагрузки страницы?

При работе с сайтом пользователь будет многократно вводить данные(текст) в инпут, и каждый раз нужно будет их переписывать в значение переменной.
Быть может есть более короткое решение?

Подскажите, в каком направлении копать? )

#2

Ajax это отправка запроса серверу.

Чтобы просто взять данные и никуда не отправлять Ajax не нужен.

<input id="myInput" type="text" value="hello">
<button id="myButton">Press me</button>

const button = document.querySelector('#myButton')
const input = document.querySelector('#myInput')

button.addEventListener('click', () => {
  const text = input.value
  alert(text)
})

https://jsfiddle.net/AlexP11223/p42g6m1f/4/

#3

хмм… я ставил именно тег input с атрибутом submit. Соответственно при клике происходила отправка формы и перезагрузка.
Получается тогда input и button не должен находиться внутри тега form?
А если расмматривать со стороны семантики, не будет более верно тогда использовать submit с инпутом внутри тега форм, но каким либо образом сделеать что бы кнопка была кликабельна, но не отправлялась, соответственно и не перезагружал страницу

#4

хотя submit же не обязателен для формы. Я же могу его изменить на обычный button и оставить удобную себе структуру в внутри form.
Спасибо еще раз!! а с ajax тема оказалась очень интересная :+1:

#5

Делюсь впечатлением: из тега форм пришлось все таки вынуть. Не смог объяснить почему, но когда к примеру ввожу букву Z, страница все же перезагружается, а вот если повторно ввести Z, уже передастся в переменную. Если ввести потом опять другую букву - опять перезагрузка, и так по кругу, при каждом новом значении

#6

Не похоже на стандартное поведение, видимо (какой-то другой?) скрипт что-то странное делает, или не делает, я бы для начала посмотрел нет ли ошибок в DevTools —> Console.