Input Form OnChange Function Not Displaying Data?-CodePudding

So I made this codepen here https://codepen.io/shodoro/pen/xxYqXqv?editors=1111

I am trying to get whatever I type into my input form to display in my console, but everytime I type something it just shows " "

Right now I understand that I set my data to be " ", but I don't know how to make what I type to display

heres the 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>

Here's the javascript

      function updateInfo() {
          const url = ""
          const data = {
              Street: '',
              City: '',
              Zipcode: '',
          }

          document.getElementById('street').value = data.Street

          console.log('hi', data.Street)
      }

Note eventually I will want to integrate this with a backend API, so whatever I type will update into the API data, but for now I just want to confirm my inputs work first

CodePudding user response：

You are not getting the data you are typing as you are not looking for it. Forms are submitted on button clicks unless the type of the form button is specifically not submit type. You need to prevent your form from submitting using the preventDefault method.

Add to that, you are assigning the empty field of the Data object into the input field's value. I think what you are trying to achieve is

data.Street = document.getElementById('street').value;

CodePudding user response：

Change this

document.getElementById('street').value = data.Street

   data.Street = document.getElementById('street').value