How can I get user's information and then save them into an object?

Admin 1
Viewed 39

I made a form to get name and last name from user. When they submit the form it will save the information into an object

document.getElementById('sub').addEventListener('click', () => {
  let name = document.getElementById('name').value;
  let lastName = document.getElementById('lastName').value;
  let user = {
    name: name,
    lastName: lastName
  }
  let sayHello = document.getElementById('sayHello');
  sayHello.innerHTML = "hello " + user.name + " " + user.lastName + " how are you?"
})
<div>
  <form>
    <label> name : </label>
    <input type="text" id="name"> <br>
    <label> last name : </label>
    <input type="text" id="lastName"> <br>
    <button id="sub">save</button>
  </form>
</div>
<span id="sayHello">hi</span>

How can I fix it?

forms html javascript
1 Answers

Your button is trying to submit a form, which causes the page to refresh.

You can prevent this by calling preventDefault() on the click event:

document.getElementById('sub').addEventListener('click', (e) => {
  e.preventDefault();
  let name = document.getElementById('name').value;
  let lastName = document.getElementById('lastName').value;

  let user = {
    name: name,
    lastName: lastName
  }

  let sayHello = document.getElementById('sayHello');
  sayHello.innerHTML = "hello " + user.name + " " + user.lastName + " how are you?"

})
<div>
  <form>
    <label> name : </label>
    <input type="text" id="name"> <br>
    <label> last name : </label>
    <input type="text" id="lastName"> <br>
    <button id="sub">save</button>
  </form>
</div>

<span id="sayHello">hi</span>

user_34123220
Related