Can someone assist me with a problem I'm facing? I need to display a success message after successfully submitting a form. I'm utilizing bootstrap and jQuery for this task, along with an email service known as emailJS. This service enables us to send form data directly to our email. Here's the code that I have:
Below is my code snippet:
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>The data is being sent correctly, but the bootstrap alert is not displaying. Any help would be appreciated. Thank you!