everytime i submit a form from my site it refreshes back up to the top
ive done const sendEmail = (e) => { e.preventDefault()
so I dont know where I go wrong with it.
It also submits something everytime I reload the page even though theres no input.
ive tried digging up everything I can find, but to no avail I dont really know whats wrong i’ve only been coding for a year im only a 16yr old senior highschool so please help me.
this is the html
<form action="" class="feedback__form" id="feedback-form">
<div class="feedback__group">
<div class="feedback__box">
<input type="text" name="user_name" class="feedback__input" id="name" required placeholder="First Name">
<label for="name" class="feedback__label">First Name</label>
</div>
<div class="feedback__box">
<input type="email" name="user_email" class="feedback__input" id="email" required placeholder="Email Address">
<label for="name" class="feedback__label">Email Address</label>
</div>
</div>
<div class="feedback__box">
<input type="text" name="user_subject" class="feedback__input" id="subject" required placeholder="Subject">
<label for="subject" class="feedback__label">Subject</label>
</div>
<div class="feedback__box feedback__area">
<textarea name="user__message" id="message" class="feedback__input" required placeholder="Message"></textarea>
<label for="message" class="feedback__label">Message</label>
</div>
<p class="feedback__message" id="feedback-message"></p>
<button type="submit" class="feedback__button button" id="feedback-submit">
<i class="ri-send-plane-line"></i>Send Message
</button>
</form>
this is the javascript
const feedbackForm = document.getElementById('feedback-form'),
feedbackMessage = document.getElementById('feedback-message'),
feedbackSubmit = document.getElementById('feedback-message')
const sendEmail = (e) => {
e.preventDefault()
}
emailjs.sendForm('service_mbynjbg','template_xm8yzfd','#feedback-form','SroPTASblucuUzgXt')
.then(() =>{
feedbackMessage.textContent = 'Message sent successfully :D'
setTimeout(() =>{
feedbackMessage.textContent = ''
}, 5000)
feedbackForm.reset()
}, () => {
feedbackMessage.textContent = 'Message not sent (service error)'
})
feedbackSubmit.addEventListener('submit', sendEmail)
ive tried const sendEmail = (e) => { e.preventDefault()
2
Answers
When you submit the form, the page refreshes back to the top. This happens because the form is actually being submitted, even though you have
e.preventDefault()
in yoursendEmail
function.You can wrap your JavaScript code in a condition that checks whether the form was actually submitted.
By checking feedbackForm exists before the event listener, you ensure that the event listener is only added when the form element is present on the page.
Perhaps the simplest solution would be to change your
<button type="submit">
to<button type="button">
. The button event changes fromsubmit
toclick
and you don’t then need to usee.preventDefault()
.Here I’m using the handler to iterate over the form entries, but you can probably substitute
form
for#feedback-form
in your sendMail arguments.