仅使用Javascript-我提交了表单，但没有任何反应

Question

I am new to Javascript. I am trying to learn it by doing exercises. The one I am doing doesn't seem hard but I have a little problem.

I have a form with 3 texts inputs, and a submit button. By pressing the button I get the fields values and create a text block with these values. Then the form is hidden.

When I click the button, form is hidden, but the text block is not created.

If I replace input type = submit with input type = button, text block is created, but required attribute doesn't work.

I expect : I click the first button, form appears. I fill the form and click the button, text block is created, form is hidden, and first button appears.

Result : I click the first button, form appears. I fill the form and click the button, form is hidden, and first button appears.

 function clicBoutonAjouter() { // On récupère les valeurs du formulaire var formAuteur = document.getElementById("form1").value; var formTitre = document.getElementById("form2").value; var formUrl = document.getElementById("form3").value; // Création élément url var formDivTextUrl = document.createElement("span"); formDivTextUrl.appendChild(document.createTextNode(formUrl)); // Création élément titre cliquable var formDivTextTitre = document.createElement("a"); formDivTextTitre.classList.add("titre") formDivTextTitre.href = ("//" + formUrl); // à corriger : me renvoie en local/google.fr formDivTextTitre.appendChild(document.createTextNode(formTitre)); // Création élément auteur var formDivTextAuteur = document.createElement("span"); formDivTextAuteur.appendChild(document.createTextNode("Ajouté par " + formAuteur)); // Assemblage ligne un var formLigenUn = document.createElement("h4"); formLigenUn.classList.add("ligneUn"); formLigenUn.appendChild(formDivTextTitre); formLigenUn.appendChild(formDivTextUrl); // Assemblage bloc var formDiv = document.createElement("div"); formDiv.classList.add("lien"); formDiv.appendChild(formLigenUn); formDiv.appendChild(formDivTextAuteur); // Affichage var element = document.getElementById("contFormulaire"); element.insertAdjacentElement('afterend', formDiv); var formulaire1 = document.getElementById("form1"); formulaire1.classList.replace("visible", "invisible"); var formulaire2 = document.getElementById("form2"); formulaire2.classList.replace("visible", "invisible"); var formulaire3 = document.getElementById("form3"); formulaire3.classList.replace("visible", "invisible"); boutonAjout.classList.replace("visible", "invisible"); document.getElementById("ladiv"); var ladiv = document.getElementById("ladiv"); ladiv.classList.replace("invisible", "visible"); } 

 <h1>Activité 2</h1> <!-- Les nouveaux éléments sont ajoutés dans cette balise --> <div id="contenu"> <form id="contFormulaire"> <div id="ladiv" class="visible"> <button id="boutonFormulaire" type="button" onclick="clicBoutonAjoutLien()">Ajouter un lien</button> </div> <input type="text" class="invisible" id="form1" name="form1" placeholder="Entrer votre nom" required> <input type="text" class="invisible" id="form2" name="form2" placeholder="Entrer le titre du lien" required> <input type="text" class="invisible" id="form3" name="form3" placeholder="Entrer l'URL du site" required> <input type="submit" value="Ajouter" id="boutonAjout" class="invisible" onsubmit="clicBoutonAjouter()"> </form> </div> 

Answer 1

You need move onsubmit="return clicBoutonAjouter()" to form tag

and return false on clicBoutonAjouter to prevent page reload.

 function clicBoutonAjouter() { // On récupère les valeurs du formulaire var formAuteur = document.getElementById("form1").value; var formTitre = document.getElementById("form2").value; var formUrl = document.getElementById("form3").value; // Création élément url var formDivTextUrl = document.createElement("span"); formDivTextUrl.appendChild(document.createTextNode(formUrl)); // Création élément titre cliquable var formDivTextTitre = document.createElement("a"); formDivTextTitre.classList.add("titre") formDivTextTitre.href = ("//" + formUrl); // à corriger : me renvoie en local/google.fr formDivTextTitre.appendChild(document.createTextNode(formTitre)); // Création élément auteur var formDivTextAuteur = document.createElement("span"); formDivTextAuteur.appendChild(document.createTextNode("Ajouté par " + formAuteur)); // Assemblage ligne un var formLigenUn = document.createElement("h4"); formLigenUn.classList.add("ligneUn"); formLigenUn.appendChild(formDivTextTitre); formLigenUn.appendChild(formDivTextUrl); // Assemblage bloc var formDiv = document.createElement("div"); formDiv.classList.add("lien"); formDiv.appendChild(formLigenUn); formDiv.appendChild(formDivTextAuteur); // Affichage var element = document.getElementById("contFormulaire"); element.insertAdjacentElement('afterend', formDiv); var formulaire1 = document.getElementById("form1"); formulaire1.classList.replace("visible", "invisible"); var formulaire2 = document.getElementById("form2"); formulaire2.classList.replace("visible", "invisible"); var formulaire3 = document.getElementById("form3"); formulaire3.classList.replace("visible", "invisible"); boutonAjout.classList.replace("visible", "invisible"); document.getElementById("ladiv"); var ladiv = document.getElementById("ladiv"); ladiv.classList.replace("invisible", "visible"); return false; } 

 <!-- Les nouveaux éléments sont ajoutés dans cette balise --> <div id="contenu"> <form id ="contFormulaire" onsubmit="return clicBoutonAjouter()"> <div id="ladiv" class="visible"> <button id="boutonFormulaire" type="button" onclick="clicBoutonAjoutLien()">Ajouter un lien</button> </div> <input type="text" class="invisible" id="form1" name="form1" placeholder="Entrer votre nom" required> <input type="text" class="invisible" id="form2" name="form2" placeholder="Entrer le titre du lien" required> <input type="text" class="invisible" id="form3" name="form3" placeholder="Entrer l'URL du site" required> <input type="submit" value="Ajouter" id="boutonAjout" class="invisible" > </form> </div>