Stop refreshing page on submit-CodePudding

I am doing an email project and trying to copy the data of the user into a localstorage. I've coded everything but when trying to press the button, it keeps refreshing the page. I tried many way to fix it but can't find any.

I thought using e.preventDefault(); could fix it, but it doesn't.

const Envoie = document.getElementsById("Envoie");
const EmailInfo = document.querySelector('.Storage');
const prenomInput = Envoie['PremierNom'];
const nomInput = Envoie['DeuxiemeNom'];
const emailInput = Envoie['AdresseC'];
const objetInput = Envoie['Objet'];

const addEmail = (PremierNom, DeuxiemeNom, AdresseC, Objet) => {
  email.push({
    PremierNom: prenom,
    DeuxiemeNom: nom,
    Objet: objet,
    AdresseC: mail
  })
  return {
    prenom,
    nom,
    objet,
    mail
  };
};

const createEmailElement = ({
  PremierNom,
  DeuxiemeNom,
  AdresseC,
  Objet
}) => {
  const emailDiv = document.createElement('div');
  const emailPrenom = document.createElement('h1');
  const emailnom = document.createElement('h1');
  const emailobjet = document.createElement('h1');
  const emailAdresse = document.createElement('h1');


  emailPrenom.innerText = "Prenom: "   PremierNom;
  emailnom.innerText = "Nom: "   DeuxiemeNom;
  emailobjet.innerText = "Objet: "   Objet;
  emailAdresse.innerText = "Adresse Courriel: "   AdresseC;

  emailDiv.append(emailPrenom, emailnom, emailobjet, emailAdresse);
  EmailInfo.appendChild(emailDiv);

};

email.forEach(createEmailElement);

Envoie.onSubmit = e => {
  e.preventDefault();

  const newEmail = addEmail(
    prenomInput.value,
    nomInput.value,
    objetInput.value,
    emailInput.value
  );

  createEmailElement(newEmail)
  prenomInput.value = ""
  nomInput.value = ""
  objetInput.value = ""
  emailInput.value = ""

};

<h2>Bienvenue sur la page d'accueil de CourrielFares </h2>
<section>

  <form id="Envoie">
    <div >
      <label for="PremierNom"> Votre Prenom </label>
      <input type="text" id="PremierNom" name="PremierNom" </div>
      <div >
        <label for="DeuxiemeNom"> Votre Nom </label>
        <input type="text" id="DeuxiemeNom" name="DeuxiemeNom" </div>
        <div >
          <label for="AdresseC"> Votre Adresse Courriel </label>
          <input type="text" id="AdresseC" name="AdresseC" </div>
          <div >
            <label for="Objet"> Objet</label>
            <input type="text" id="Objet" name="Objet" </div>
            <div >
              <label for="MSG"> Message </label>
              <textarea name="MSG" id="MSG" cols="25" rows="10"></textarea>
            </div>
            <button type="Envoyer">Envoyer</button>
  </form>

  <div ></div>
  
</section>

CodePudding user response：

Try to add return false; at the end of your onSubmit function

Envoie.onSubmit = e => {
    e.preventDefault();

    const newEmail = addEmail(
        prenomInput.value,
        nomInput.value,
        objetInput.value,
        emailInput.value
    );

    createEmailElement(newEmail)
        prenomInput.value = ""
        nomInput.value = ""
        objetInput.value = ""
        emailInput.value = ""

    return false; //block page from reloading
};

CodePudding user response：

The problem is with syntaxes

First your selector getElementsById has an extra 's' it must be const Envoie = document.getElementById("Envoie");
onSubmit has uppercase 'S' it must be lowercas, as all the javascript event names are lowercase only. Envoie.onsubmit = e => { ..... }