时间戳

首页 > 解决方案 > 带有 JavaScript 和 HTML 的动态表单

javascript - 带有 JavaScript 和 HTML 的动态表单

问题描述

我正在尝试使用允许您动态添加和删除字段的按钮在 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 文件的每个页面中重置此变量。这是对的吗？

非常感谢。

标签： javascripthtmldom

解决方案

首先欢迎使用 Stackoverflow！:)

关于您的代码：

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

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

  • 您还需要了解附加元素的方式非常重要，如果您创建一个label，和一个strong然后设置标签innerHTML的strong，但先附加标签，强将没有文字......

  • 你也忘了设置你的全局变量，所以我假设你 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>设置将删除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

推荐阅读