Question

我想做一件简单的事情。我有一个页面顶部有一个按钮，下面有空的html表格。当我单击按钮模式弹出时，我有另外的文本框，并下拉两个按钮，取消和保存。当我单击“保存”按钮时，我想显示文本框中的数据并将其作为表格中的新行下拉。但事实并非如此。模态消失，但表中没有添加新行。当我尝试调试它时，一切似乎都是正确的，没有发现异常，所有值都正确添加，但仍然没有。我想问题是由模态引起的，有人知道如何解决这个问题吗？

这是我的代码：

<html>
<head>
  <title>Battery Test App</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <button id="btnAddNew">Add new</button>
  <br>
  <br>
  <table id="results" width="360">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
  </table>
  <div id="modalAddNewTest" class="modal">
    <div class="modal-content">
      <span class="close">x</span>
      <form name="formTestInfo" method="post">
        Name:<br>
        <input type="text" id="tbName" name="tbName">
        <p id="nameVal"></p>
        Test:<br>
        <select id="ddlTest">
          <option value="belbin">Belbin</option>
          <option value="raven">Raven</option>
          <option value="ppa">PPA</option>
          <option value="ppaPlus">PPA+</option>
          <option value="basicKnowledge">Basic Knowledge</option>
          <option value="pct">PCT</option>
        </select>
        <br>
        <br>
        <button id="btnCancel">Cancel</button>
        <button id="btnSave" onclick="validateForm(return false;);">Save</button>
      </form>
    </div>
  </div>

  <script type="text/javascript">
      var nameValidation;
      var modal = document.getElementById('modalAddNewTest');
      var btn = document.getElementById("btnAddNew");
      var btnSave = document.getElementById("btnSave");
      var span = document.getElementsByClassName("close")[0];

      btn.onclick = function() {
          modal.style.display = "block";
      }

      span.onclick = function() {
          modal.style.display = "none";
      }

      function validateForm() {
        var x = document.forms["formTestInfo"]["tbName"].value;
        if (x == null || x == "") {
            nameValidation = "Name must be filled out";
            document.getElementById("nameVal").innerHTML = nameValidation;
        }
        else
        {
            var table = document.getElementById("results");
            var name = document.getElementById("tbName").value;
            var e = document.getElementById("ddlTest");
            var selectedTest = e.options[e.selectedIndex].value;

            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth()+1; 
            var yyyy = today.getFullYear();

            if(dd<10) {
                dd='0'+dd
            } 

            if(mm<10) {
                mm='0'+mm
            } 

            today = mm+'/'+dd+'/'+yyyy;

            //In the first step using InsertRow function you are creating a first row i.e tr 
            var row = table.insertRow(table.rows.length);

            //In the second step you create a cell i.e td dynamically
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);

            // Here in step 3 you can add data to your cells from the modal popup inputs(According to your logic)
            cell1.innerHTML = today;
            cell2.innerHTML = name;
            cell3.innerHTML = selectedTest;
        }
    }
</script>
</body>
</html>

Answer 1

我希望这会对你有所帮助。

将此添加到按钮角色=＆＃34;按钮＆＃34;类型=＆＃34;按钮＆＃34 ;.不确定，但有些浏览器将按钮视为＆＃34;提交＆＃34;如果根据我使用旧版maxthon浏览器的经验插入内部类型。

<button id="btnSave" role="button" type="button" onclick="validateForm(return false;);">Save</button>

你需要修复你正在调用的内联js函数。你有错误添加＆＃34;;＆＃34;在返回false和..你可以删除＆＃34;返回false＆＃34;。

尝试如下所示：

<button id="btnSave" role="button" type="button" onclick="validateForm();">Save</button>

Answer 2

那很糟糕：
＆lt; button id =＆＃34; btnSave＆＃34; onclick =＆＃34; validateForm（return false;）; ＆＃34;＆gt;保存你正试图这样做：
＆lt; button id =＆＃34; btnSave＆＃34; onclick =＆＃34; validateForm（）;返回false; ＆＃34;＆gt;保存

最好的办法是在validateForm中返回true / false 作为验证的真实结果。

Answer 3

最好的方法是从按钮中删除onclick属性，并使用以下代码：

btnSave.onclick = function() {
    validateForm();
    return false;
}

效果很好，你的代码中的意大利面就会少一些。

如果您需要更多功能，也可以使用addEventListener。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

在javaScript中关闭模式后，不会添加表中的新行

3 个答案: