<form id="chat" method="post" action="/my-backend-script">
  <input type="text" placeholder="What's on your mind?" />
  <input type="submit" value="Post" />
</form>

#chat {
  display: flex;
}

#chat input[type="text"],
#chat input[type="submit"] {
  padding: 5px 10px;
  border: 1px solid #666;
  outline: none;
}

#chat input[type="text"] {
  flex: 1;
  margin-right: 10px;
}

#chat input[type="text"]:focus {
  border-color: #369;
}

#chat input[type="submit"] {
  margin-right: 10px;
  text-transform: uppercase;
}

#chat input[type="submit"]:active {
  border-color: #369;
  background-color: #369;
  color: #fff;
}


const onFormSubmit = (event) => {
  event.preventDefault()
  event.stopPropagation()

  // Step 1: take references to the elements
  //         MDN: querySelector
  const input = document.querySelector('#chat input[type="text"]')
  
  // Step 2: find the text that was written
  //         into the input
  //         MDN: input element
  const text = input.value
  
  // Step 3: build the real logic...
  if (text.length > 0) {
    input.value = '' // reset the value
    input.focus()    // set focus to field
    alert(text)
  } else {
    input.focus()
    alert('Please write something')
  }
}

document
  .getElementById('chat')
  .addEventListener('submit', onFormSubmit)
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.