Question

我正在尝试从表单输入中传递一个简单变量，以.innerHTML语法填充跨度。我的代码（带有search.ejs）如下：

<script>function readSearchValue() {
      var passedSearchValue = document.getElementById('searchForm').submit();
      document.getElementById('mySearch').innerHTML = passedSearchValue;
    }
  </script>

  <!-- Search form -->
  <nav class="navbar navbar-light bg-light">
    <form class="form-inline" id="searchForm">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="searchValue">
      <button class="btn btn-outline-success my-2 my-sm-0 glyphicon glyphicon-search" type="submit" onclick="readSearchValue()"></button>
    </form>
  </nav>

<p>You have searched for:
    <span id="mySearch"></span>
  </p>

我还有一个search.js文件，该文件不会执行很多ATM：

res.render('search', {
        title: 'Search results',

我在上面的代码中收到未定义的错误。预先感谢您的帮助！

凯利。

Answer 1

如果要从服务器发送值，则可以直接使用ejs表达式。如果您想在本地工作，则可以看到以下代码。

function readSearchValue() {
      document.getElementById('mySearch').innerHTML = document.getElementById('searchValue').value;
      document.getElementById('searchForm').submit();
    }

<!-- Search form -->
  <nav class="navbar navbar-light bg-light">
    <form class="form-inline" id="searchForm" method="POST">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" id="searchValue">
      <button class="btn btn-outline-success my-2 my-sm-0 glyphicon glyphicon-search" type="button" onclick="readSearchValue();">Submit</button>
    </form>
  </nav>

<p>You have searched for:
    <span id="mySearch"></span>
  </p>

目前，您无法看到永久值，因为表单正在提交，因此页面正在重新加载。

Answer 2

您的代码即将完成。您唯一需要更改的是“ readSearchValue”函数的第二行。将“ mySearch”框的innerHTML设置为“ searchValue”输入字段的值。代码-document.getElementById("mySearch").innerHTML = document.getElementById("searchValue").value

传递JavaScript变量以填充innerHTML

2 个答案: