我想在提交表单时显示成功消息

function submitForm(e) {
  var temp = {
    name: document.querySelector('#name').value,
    email: document.querySelector('#email').value,
    city: document.querySelector('#city').value,
    state: document.querySelector('#state').value
  };
  emailjs.send('service-register', 'register', temp)
    .then($('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show())
}

<form action="javascript:submitForm()" id="register-form">
  <img src="img/logo.svg">
  <h2 class="title">Your Information</h2>
  <div class="input-div one">
    <div class="i">
      <i class="fas fa-user"></i>
    </div>
    <div class="div">
      <h5>Name</h5>
      <input id="name" type="text" class="input">
    </div>
  </div>
  <div class="input-div pass">
    <div class="i">
      <i class="far fa-envelope"></i>
    </div>
    <div class="div">
      <h5>E-mail</h5>
      <input id="email" type="email" class="input">
    </div>
  </div>
  <div class="input-div pass">
    <div class="i">
      <i class="fas fa-city"></i>
    </div>
    <div class="div">
      <h5>City</h5>
      <input id="city" type="text" class="input">
    </div>
  </div>
  <div class="input-div pass">
    <div class="i">
      <i class="fas fa-map-signs"></i>
    </div>
    <div class="div">
      <h5>State</h5>
      <input id="state" type="text" class="input">
    </div>
  </div>

  <button type="submit" class="btn">Register</button>
  <div id="messages" class="hide">
    <button type="button" id="close" class="close" data-dismiss="alert" aria-hidden="true">×</button> Thank you for getting in touch!
  </div>
</form>