Question

我是Java的新手。我正在尝试通过练习来学习它。我正在做的事似乎并不困难，但是我有一个小问题。

我有一个带有3个文本输入的表单和一个提交按钮。通过按下按钮，我得到字段值并使用这些值创建一个文本块。然后表单被隐藏。

当我单击按钮时，表单是隐藏的，但未创建文本块。

如果我将输入类型=提交替换为输入类型=按钮，则会创建文本块，但是必填属性不起作用。

我希望： 我单击第一个按钮，出现表格。我填写表单，然后单击按钮，创建文本块，隐藏表单，然后显示第一个按钮。

结果： 我单击第一个按钮，出现表格。我填写表单，然后单击按钮，表单被隐藏，然后出现第一个按钮。

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

您需要移动onsubmit="return clicBoutonAjouter()"来形成标签

和return false上的clicBoutonAjouter，以防止重新加载页面。

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>

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

1 个答案: