Так что я сделал этот codepen здесь https://codepen.io/shodoro/pen/xxYqXqv?editors=1111
Я пытаюсь получить все, что я ввожу в свою форму ввода, для отображения в моей консоли, но каждый раз, когда я что-то набираю, он просто показывает " "
Прямо сейчас я понимаю, что я установил свои данные как " ", но я не знаю, как сделать так, чтобы то, что я печатаю, отображалось
вот html
<form>
<input type = "text" placeholder = "Street" id = "street" onchange = "updateInfo()">
<input type = "text" placeholder = "City" id = "city" onchange = "updateInfo()">
<input type = "text" placeholder = "Zipcode" id = "zipcode" onchange = "updateInfo()">
</form>
вот джаваскрипт
function updateInfo() {
const url = ""
const data = {
Street: '',
City: '',
Zipcode: '',
}
document.getElementById('street').value = data.Street
console.info('hi', data.Street)
}
Обратите внимание, что в конечном итоге я захочу интегрировать это с внутренним API, поэтому все, что я ввожу, будет обновляться в данных API, но сейчас я просто хочу сначала подтвердить, что мои входные данные работают.
Вы не получаете данные, которые вводите, поскольку не ищете их.
Формы отправляются при нажатии кнопки, если только тип кнопки формы не является типом submit
. Вам нужно запретить отправку формы с помощью метода preventDefault
.
Добавьте к этому, что вы назначаете пустое поле объекта Data
значению поля ввода. Я думаю, что вы пытаетесь достичь
data.Street = document.getElementById('street').value;
Это не меняет порядок. Это простой оператор присваивания. Вы присваиваете значение справа переменной слева.
Пример: пусть k = 77; Вы присваиваете 77 переменной k, а не наоборот
ах, так я бы поместил свою функцию updateInfo() в форму отправки, чтобы она отображала мои данные только после того, как я заполнил все другие поля ввода? потому что прямо сейчас, если я нажму на свой следующий ввод, он сразу же зарегистрирует данные
В настоящее время ваш код получает значения всех полей ввода по отдельности. На самом деле, вы просто используете input#street
. Я бы рекомендовал вам следовать этой последовательности: 1. удалить все идентификаторы из полей ввода 2. добавить идентификатор в форму, чтобы обнаружить форму из DOM 3. использовать событие отправки формы, чтобы предотвратить поведение отправки по умолчанию 4. использовать FormData конструктор получает данные формы, а затем выполняет остальную часть кода. Посмотрите документы MDN для FormData и как их использовать.
моя конечная цель - отправить все данные формы на серверный API, где они будут храниться, поэтому с вашим методом это будет правильным способом? потому что я видел, что код был похож на <form action = "url of api" method = "post">...
Приведенный выше код напрямую взаимодействует с серверной частью. Атрибут действия отправляет данные формы в конечную точку внутреннего API с помощью метода post. Это старый способ, и он отлично работает. Однако, если вы используете интерфейсную структуру, такую как react, vue, angular и т. д., вы хотите предотвратить отправку формы, чтобы вы могли проверить данные формы на стороне клиента, а затем отправить проверенные данные на серверную часть с помощью вызовов AJAX ( например: получить API)
Изменить это
document.getElementById('street').value = data.Street
к
data.Street = document.getElementById('street').value
почему изменение порядка заставило его работать?