使用 JavaScript 和 HTML 的动态表单

Question

我正在尝试使用一个按钮在 HTML 中构建一个页面表单，该按钮允许您动态添加和删除字段。 特别是，我想点击 3 个新字段。

我遵循 W3C 和 StackOverflow 上的指示，但我的代码不起作用。 在带有开发人员工具的 Safari 中添加我没有收到任何错误。

这是我的 HTML 代码：

 var numWriters; function isNumberKey(event) { var code = event.which || event.keyCode; if (code > 31 && (code < 48 || code > 57)) return false; return true; } function resetNumWriters() { numWriters = 1; } function addWriter() { numWriters++; var divWriters = document.getElementById("containerWriters"); var ul = document.createElement("ul"); var liName = document.createElement("li"); var labelName = document.createElement("label"); var strongName = document.createElement("strong"); strongName.InnerHTML = "Writer's name"; var inputTextName = document.createElement("input"); inputTextName.setAttribute("type", "text"); inputTextName.setAttribute("name", "writerName" + numWriters); divWriters.appendChild(ul); ul.appendChild(liName); liName.appendChild(labelName); labelName.appendChild(strongName); liName.appendChild(inputTextName); var liSurname = document.createElement("li"); var labelSurname = document.createElement("label"); var strongSurname = document.createElement("strong"); strongSurname.InnerHTML = "Writer's surname"; var inputTextSurname = document.createElement("input"); inputTextSurname.setAttribute("type", "text"); inputTextSurname.setAttribute("name", "writerSurname" + numWriters); ul.appendChild(liSurname); liSurname.appendChild(labelSurname); labelSurname.appendChild(strongSurname); liSurname.appendChild(inputTextSurname); var liDateOfBirth = document.createElement("li"); var labelDateOfBirth = document.createElement("label"); var strongDateOfBirth = document.createElement("strong"); strongDateOfBirth.InnerHTML = "Writer's dateOfBirth"; var inputDateOfBirth = document.createElement("input"); inputDateOfBirth.setAttribute("type", "date"); inputDateOfBirth.setAttribute("name", "writerDateOfBirth" + numWriters); ul.appendChild(liDateOfBirth); liSurname.appendChild(labelDateOfBirth); labelDateOfBirth.appendChild(strongDateOfBirth); liDateOfBirth.appendChild(inputDateOfBirth); }

 <form class="formSpaceDataProduct" action="addBook" method="POST"> <fieldset> <legend> Insert the book data </legend> <ul> <li> <label> <strong>Title:</strong> </label> <input type="text" name="Title" placeholder="Title of book" maxlength="50" required></input> </li> <li> <label> <strong>Quantity:</strong> </label> <input type="text" name="Quantity" placeholder="Max quantity in stock can be 999" maxlength="3" pattern="[0-9]{1,3}" onkeydown="return isNumberKey(event)" required></input> </li> <li> <label> <strong>Year of publication:</strong> </label> <input type="text" name="yearOfPublication" placeholder="Year of publication" maxlength="4" pattern="[0-9]{1,4}" onkeydown="return isNumberKey(event)" required></input> </li> <li> <label> <strong>Genre:</strong> </label> <select name="Genre"> <option value="Select">Select</option> <option value="History">History</option> <option value="Fantasy">Fantasy</option> <option value="Child">Child</option> <option value="Art">Art</option> <option value="Music">Music</option> <option value="Thriller">Thriller</option> <option value="Travel">Travel</option> <option value="Biography">Biography</option> <option value="Poetry">Poetry</option> <option value="Romance">Romance</option> <option value="Science">Science</option> </select> </li> <li> <label> <strong>Number of pages:</strong> </label> <input type="text" name="numPages" placeholder="Max length: 99.999 pages" maxlength="5" pattern="[0-9]{1,5}" onkeydown="return isNumberKey(event)" required></input> </li> <li> <label> <strong>ISBN:</strong> </label> <input type="text" name="ISBN" placeholder="A 13-digit numric code" maxlength="13" pattern="[0-9]{13}" onkeydown="return isNumberKey(event)" required></input> </li> <li> <label> <strong>Publisher:</strong> </label> <input type="text" name="publisher" placeholder="The name of the publishing house" maxlength="30" required></input> </li> <li> <label> <strong>Writer's name:</strong> </label> <input type="text" name="writerName1" placeholder="The name of the Writer" maxlength="20" required></input> </li> <li> <label> <strong>Writer's surname:</strong> </label> <input type="text" name="writerSurname1" placeholder="The surname of the Writer" maxlength="20" required></input> </li> <li> <label> <strong>Writer's date of birth:</strong> </label> <input type="date" name="writerDateOfBirth1" required></input> </li> </ul> <div id="containerWriters"> <button type="button" id="addWriter" onclick="addWriter"> Add Writer </button> </div> <!--Submit all data --> <input type="submit" value="Insert" id="submit"></input> </fieldset> </form>

在我的 JS 代码中，变量 numWriters 想用来计算已经在表单中添加了多少作者。 这是因为我需要每个作者的每个字段的属性“名称”与以前不同。 我想在包含此 javascript 文件的每个页面中重置此变量。 这是正确的吗？

非常感谢。

Answer 1

首先欢迎来到 Stackoverflow！ :)

关于您的代码：

• 在您的button标签中，要调用一个函数， onclick事件必须指定一个函数，而您指定的只是一个字符串。 您应该将onclick="addWriter"更改为onclick="addWriter()"

• 由于您的函数名称，请将按钮 id 更改为其他名称，例如<button type="button" id="btnAddWriter" ...

• 你还需要明白，追加元素的方式很重要，如果你创建一个label ，一个strong然后设置你的strong标签的innerHTML ，但先追加标签，强将没有文字......

• 你也忘记设置你的全局变量，所以我假设你在页面加载时调用了resetNumWriters() ......

• 最后，为了避免 DRY（不要重复自己），我建议使用如下代码：

<script>
    var numWriters;

    function isNumberKey(event) {
      var code = event.which || event.keyCode;
      if (code > 31 && (code < 48 || code > 57))
        return false;
      return true;
    }

    function resetNumWriters() {
      numWriters = 1;
    }

    function addTextField(title, numWriters) {
      console.log('addTextField ' + numWriters);
      var liName = document.createElement("li");
      var labelName = document.createElement("label");
      var strongName = document.createElement("strong");
      strongName.innerHTML = title + ":&nbsp;";
      var inputTextName = document.createElement("input");
      inputTextName.setAttribute("type", "text");
      inputTextName.setAttribute("name", "writerName" + numWriters);

      labelName.appendChild(strongName);
      liName.appendChild(labelName);
      liName.appendChild(inputTextName);

      return liName;
    }

    function addBirthdayField(title, numWriters) {
      console.log('addBirthdayField ' + numWriters);
      var liDateOfBirth = document.createElement("li");
      var labelDateOfBirth = document.createElement("label");
      var strongDateOfBirth = document.createElement("strong");
      strongDateOfBirth.innerHTML = title + ":&nbsp;";
      var inputDateOfBirth = document.createElement("input");
      inputDateOfBirth.setAttribute("type", "date");
      inputDateOfBirth.setAttribute("name", "writerDateOfBirth" + numWriters);

      labelDateOfBirth.appendChild(strongDateOfBirth);
      liDateOfBirth.appendChild(labelDateOfBirth);
      liDateOfBirth.appendChild(inputDateOfBirth);

      return liDateOfBirth;
    }

    function addWriter() {
      numWriters++;
      console.log('adding Writter ' + numWriters);

      var divWriters = document.getElementById("containerWriters");
      var ul = document.createElement("ul");

      var labelName = addTextField("Writer's name", numWriters);
      var labelSurname = addTextField("Writer's surname", numWriters);
      var labelBirthday = addBirthdayField("Writer's date of birth", numWriters);

      ul.appendChild(labelName);
      ul.appendChild(labelSurname);
      ul.appendChild(labelBirthday);

      divWriters.appendChild(ul);
    }

    resetNumWriters();
</script>

---

2019年8 月 29 日编辑-添加了删除作者代码

• 创建一个按钮并在<style>中设置<style> ，这将删除ul
• 将addLabelField提取到它自己的函数中

<style>
    fieldset { width: 480px; }
    ul button { position: relative; float: right; }
</style>

<script>
    var numWriters;

    function isNumberKey(event) {
      var code = event.which || event.keyCode;
      if (code > 31 && (code < 48 || code > 57))
        return false;
      return true;
    }

    function resetNumWriters() {
      numWriters = 1;
    }

    // added function
    function addLabelField(title) { 
      var label = document.createElement("label");
      var strong = document.createElement("strong");
      strong.innerHTML = title + ":&nbsp;";

      label.appendChild(strong);
      return label;
    }

    function addTextField(title, numWriters) {
      console.log('addTextField ' + numWriters);

      var liName = document.createElement("li");
      var labelName = addLabelField(title);

      var inputTextName = document.createElement("input");
      inputTextName.setAttribute("type", "text");
      inputTextName.setAttribute("name", "writerName" + numWriters);

      liName.appendChild(labelName);
      liName.appendChild(inputTextName);

      return liName;
    }

    function addBirthdayField(title, numWriters) {
      console.log('addBirthdayField ' + numWriters);

      var liDateOfBirth = document.createElement("li");
      var labelDateOfBirth = addLabelField(title);

      var inputDateOfBirth = document.createElement("input");
      inputDateOfBirth.setAttribute("type", "date");
      inputDateOfBirth.setAttribute("name", "writerDateOfBirth" + numWriters);

      liDateOfBirth.appendChild(labelDateOfBirth);
      liDateOfBirth.appendChild(inputDateOfBirth);

      return liDateOfBirth;
    }

    function addWriter() {
      numWriters++;
      console.log('adding Writter ' + numWriters);

      var divWriters = document.getElementById("containerWriters");

      // added button
      var btn = document.createElement("button");
      btn.innerHTML = "x";
      btn.setAttribute("onclick", "removeWriter("+ numWriters + ")");
      btn.setAttribute("title", "remove this writer");

      var ul = document.createElement("ul");
      ul.setAttribute("data-writter-id", numWriters);

      var labelName = addTextField("Writer's name", numWriters);
      var labelSurname = addTextField("Writer's surname", numWriters);
      var labelBirthday = addBirthdayField("Writer's date of birth", numWriters);

      ul.appendChild(btn);
      ul.appendChild(labelName);
      ul.appendChild(labelSurname);
      ul.appendChild(labelBirthday);

      divWriters.appendChild(ul);
    }

    function removeWriter(id) {
        document.querySelectorAll('ul[data-writter-id="' + id + '"]')[0].remove();
    }

    resetNumWriters();
</script>

---

你可以在Fiddle上找到一个完整的例子- https://jsfiddle.net/balexandre/5k9rhyxo/3