Inside index.js we're going to add that exact same selector near the bottom, jQuery, calling it with our selector #message-form. Now we're going to add an event listener, and the event listener is going to look pretty similar to our Socket.io event listeners. We are going to be calling on, and we are going to be providing, those two arguments, the event name inside quotes, submit, and a function, which is going to fire when a user tries to submit the form:

jQuery('#message-form').on('submit', function(){
  
});

Now unlike our Socket.io event listeners, we are going to get one argument in the function, an e event argument, and we are going to need to access this. We're going to need to access this event argument in order to override that default behavior that causes the page refresh. Right here we're going to call e.preventDefault:

jQuery('#message-form').on('submit', function(){
  e.preventDefault();
});

The preventDefault method prevents the default behavior for the event, and by default a submit event goes through that page refresh process.

We can go ahead and test that everything is working by going into Google Chrome, giving the page a refresh. I'm also going to remove the query string from the URL. Now we can type in some sort of message like test, hit Send, and you can see that nothing happens. Nothing happens because we overrode the default behavior, all we need to do to make something happen is call socket.emit in index.js. We're going to emit the createMessage:

jQuery('#message-form').on('submit', function(){
  e.preventDefault();

  socket.emit('createMessage', {

  });
});

Then, we're going to go ahead and provide our data. Now the name from field for now is just going to be User in uppercase. We're going to leave this as anonymous for the moment, although we will be updating that a bit later. Now for the text field, this is going to come from the form. We're going to want to add a selector and get the value back. Let's go ahead and do that using jQuery:

  socket.emit('createMessage', { 
    from: 'User', 
    text: jQuery('')
  })
});

We're going to call jQuery once again, and we're going to select the input in the index.html file. We can go ahead and select it by its name, name="message":

<input name="message" type="text" placeholder="Message"/> 

In order to get that done we're going to open up brackets in socket.emit in index.js, setting name equal to message. This is going to select any element that has a name attribute equal to message, which is just our one, and we can go ahead and get its value using the .val method:

  socket.emit('createMessage', { 
    from: 'User', 
    text: jQuery('[name=message]').val();
  })
});

No semicolon required since we're inside object creation. With this in place we can now go ahead and add our callback function for our acknowledgment. For the moment it doesn't really do anything, but that's perfectly fine. We have to add it in order to fulfill the acknowledgement set up we currently have in place:

jQuery('#message-form').on('submit', function (e) {
  e.preventDefault();
   
  socket.emit('createMessage', {
    from: 'User',
   text: jQuery('[name=message]').val()
  }, function () {
      
  })
});

Now that we have our event listener set up, let's go ahead and test this out.