Question

我正在使用Google Apps脚本来构建HTML表单，以更新基于Google表格的数据库。这是我之前成功完成的工作，因此我对自己要执行的操作有所了解。但是在我要构建的新版本中，我希望表单具有多个部分，以便用户可以展开和折叠。这样可以使表单看起来更整洁，并使导航更容易（我希望如此）。

我找到了有关如何创建可折叠部分的信息here at W3Schools。当我将其添加到HTML页面时，它可以按预期工作。但是，当我在表单中使用相同的概念时，它无法按预期方式工作。

这就是我所拥有的...

脚本：

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>

      $(function() {
        google.script.run.withSuccessHandler(buildProjectList)
        .getProjectsList();
      });

      // function to populate the project list drop down
      function buildProjectList(options) {
        var list = $('#projectList');
        list.empty();
        for (var i=0; i<options.length; i++) {
          list.append('<option value="' + options[i] + '">' + options[i] + '</option>');
        }
      }

        var coll = document.getElementsByClassName("collapsible");
        for (var i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
              content.style.display = "none";
            } else {
              content.style.display = "block";
            }
          });
        }

    </script>

CSS：

    <style>
      .collapsible {
        background-color: #777;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 14px;
      }

     .active, .collapsible:hover {
       background-color: #777;
     }

     .content {
       padding: 0 18px;
       display: none;
       overflow: hidden;
       background-color: white;
     }
   </style>

HTML：

    <p>Collapsible Set:</p>
    <button class="collapsible">Open Section 1</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <button class="collapsible">Open Section 2</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <button class="collapsible">Open Section 3</button>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <br><br>

    <table>
      <tr><th>Select a Project from this list</th></tr>
      <tr><td><select onclick='selectProject();' id="projectList" name="project"></select></td></tr>
    </table>
    <br>

    <form id="projectUpdateForm">
      <table>
        <tr>
          <th colspan="1">Project Title:</th>
        </tr>
        <tr>
          <td colspan="1"><input type="text" id="title" name="title"></td>
        </tr>
      </table>
      <br>

      <button class="collapsible">Section 1 - People</button>
      <div class="content">
        <table>
          <tr>
            <th colspan="1">Executive Sponsor:</th>
            <th colspan="1">Business Owner:</th>
            <th>Project Manager:</th>
            <th>IT Stakeholder:</th>
            <th>PMO Stakeholder:</th>
          </tr>
          <tr>
            <td colspan="1"><input type="text" id="sponsor" name="sponsor"></td>
            <td colspan="1"><input type="text" id="owner" name="owner"></td>
            <td><input type="text" id="PM" name="PM"></td>
            <td><input type="text" id="ITSH" name="ITSH"></td>
            <td><input type="text" id="PMO" name="PMO"></td>
          </tr>
        </table>
        <br>
      </div>

      <input type="button" value="Submit" class="action" name="editButton" id="editButton"
           onclick="this.disabled=true;
             this.value='Submitting Form, please wait...';
             google.script.run.withSuccessHandler().editProject(this.parentNode);
             alert('Change submitted');
             document.getElementById('projectUpdateForm').reset();
             setSelectedIndex(document.getElementById('projectList'),0);
             this.disabled=false;
             this.value='Submit';"
      />
    </form>

我从W3Schools网站上拉出的顶部区域（包括3个可折叠区域）可以正常工作。在此图像中，我单击了“打开第2部分”，它已正确打开。

但是，如果我单击“第1部分-人物”按钮，则该部分不会打开。而是，URL更改，并且屏幕变为空白。

新url中的参数确实与本节中的内容以及我如何命名这些条目相匹配。

尽管我可能错了，但我认为这与尝试将折叠功能合并到表单中有关。关于单击表单中的按钮的某些事情使它尝试提交表单？我不知道。

在此方面，我是否缺少某些东西？还是我需要用一种完全不同的方式来解决此问题，以便可以在HTML表单中包含可折叠的部分？

谢谢！

带有可折叠部分的Google Apps脚本HTML表单

0 个答案: