Lesson: Form and Button States

Andrew Mead · Andrew Mead · commit 50fc103f13bb · 2019-01-30T12:09:17.000-05:00
diff --git a/chat-app/public/js/chat.js b/chat-app/public/js/chat.js
@@ -1,15 +1,27 @@
 const socket = io()
 
+// Elements
+const $messageForm = document.querySelector('#message-form')
+const $messageFormInput = $messageForm.querySelector('input')
+const $messageFormButton = $messageForm.querySelector('button')
+const $sendLocationButton = document.querySelector('#send-location')
+
 socket.on('message', (message) => {
     console.log(message)
 })
 
-document.querySelector('#message-form').addEventListener('submit', (e) => {
+$messageForm.addEventListener('submit', (e) => {
     e.preventDefault()
 
+    $messageFormButton.setAttribute('disabled', 'disabled')
+
     const message = e.target.elements.message.value
 
     socket.emit('sendMessage', message, (error) => {
+        $messageFormButton.removeAttribute('disabled')
+        $messageFormInput.value = ''
+        $messageFormInput.focus()
+
         if (error) {
             return console.log(error)
         }
@@ -18,16 +30,19 @@ document.querySelector('#message-form').addEventListener('submit', (e) => {
     })
 })
 
-document.querySelector('#send-location').addEventListener('click', () => {
+$sendLocationButton.addEventListener('click', () => {
     if (!navigator.geolocation) {
         return alert('Geolocation is not supported by your browser.')
     }
 
+    $sendLocationButton.setAttribute('disabled', 'disabled')
+
     navigator.geolocation.getCurrentPosition((position) => {
         socket.emit('sendLocation', {
             latitude: position.coords.latitude,
             longitude: position.coords.longitude
         }, () => {
+            $sendLocationButton.removeAttribute('disabled')
             console.log('Location shared!')  
         })
     })
