Question 233576 in Html Question posted in
Some basic documentation can be found here.

Html – how to stop page from refreshing when submitting a form

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()

Tags:

2

Answers


  1. 0

    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 your sendEmail function.

    You can wrap your JavaScript code in a condition that checks whether the form was actually submitted.

    const feedbackForm = document.getElementById('feedback-form');
const feedbackMessage = document.getElementById('feedback-message');

if (feedbackForm) {
    const sendEmail = (e) => {
        e.preventDefault();

        // Place the emailjs.sendForm() and message handling code here
    };

    feedbackForm.addEventListener('submit', sendEmail);
}

    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.

    Login or Signup to reply.
  2. 0

    Perhaps the simplest solution would be to change your <button type="submit"> to <button type="button">. The button event changes from submit to click and you don’t then need to use e.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.

    const button = document.querySelector('.submit');
button.addEventListener('click', handleSubmit);

function handleSubmit(e) {
  const form = e.target.closest('form');
  // emailjs.sendForm(...., form, ...)
  for (const entry of new FormData(form).entries()) {
    console.log(entry);
  }
}
    label, button { display: block; }
    <form action="/doesntdoanything">
  <label for="firstname">First name</label>
  <input name="firstname" id="firstname" />
  <label for="lastname">Last name</label>
  <input name="lastname" id="lastname" />
  <button type="button" class="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search