Question

我是新来的，所以也许你需要给我一些关于这个社区中一切如何运作的提示。我已经在Stackoverflow上阅读了很多内容，但最终还是注册了。

我正在为我附近的博物馆设计一个小型网站，这是一个非盈利组织。他们拥有大量弹药，目前可在纸上获取信息。

我想要一个可以输入号码的网站，并显示适当的信息。到目前为止，我的测试网站一切正常。（因为那里没有可用的互联网，它应该在以后的Android平板电脑上本地运行）

我遇到的唯一问题是表单提交与按钮一起使用，而不是在机器人数字键盘上使用回车键或“打开”键。

我对javascript编码也很陌生，因为我来自微处理器上的电子和c编程，所以我可能犯了错误。

我目前在主页面中有iframe，但我原本希望它以模态打开。它没有正常工作，所以也许我可以再试一次。

现场演示：museum.smallfilms.ch/drei

表单的代码如下：

 <!-- Jumbotron Header -->
    <header class="jumbotron hero-spacer">
        <h1>Katalog:</h1>
        <p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
        <p>
<form onsubmit="searchpage()">
    <input type="number" pattern="\d*"/min="1" max="9999" id="num" >
    <button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>

Javascript代码如下：

function searchpage() {


  var num = document.getElementById('num');
  var targetFrame = document.getElementById('targetFrame');


  if (num.value) {
    var page = 'pages/' + (+num.value) + '.html';
    targetFrame.setAttribute('src', page);
  }
}

如果您需要更多代码，我可以提供此代码。请告诉我您的需要。

该网站现在旨在显示数字1和2的内容。

整个网站使用bootstrap，iframe中显示的网站使用strapdown.js以便于编辑。（我们最终需要将大约900个数据集数字化）

我认为这只是一个小错误，但经过数小时的编码和搜索互联网后，我仍然没有得到错误的来源。

提前感谢任何帮助和暗示。

Dabbax

编辑：如果有帮助，我将整个页面打包成一个zip ... museum.smallfilms.ch/drei/drei.zip

Answer 1

我认为错误来自您调用函数searchPage（）的行。我建议你尝试以下这一行：

<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">

在这种情况下，当您按Enter键时，表单将被提交并调用searchPage函数。

Answer 2

在表单的代码中，尝试：

<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>

编辑：Shaam的答案可能是正确的，但是如果你说input那么你只是试图让它看起来像带有引导程序的button，那么更合适的方法是{{1但是在你的情况下，你应该说这是一个提交表格的input type="button"。

这就是为什么你应该在这里使用button而不是button的原因。

Answer 3

这可能是你的HTML：

<form id="searchForm" action="some_url">
    <input type="number" pattern="\d*"/min="1" max="9999" id="num" >
    <input type="button"  value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>

现在向类entr添加一个事件监听器，如果密钥是 Enter ，则提交表单。所以jquery中的事件监听器就像

$('.entr').keypress(function(event) {
      if (event.which == 13) { // this is the enter key code
            document.getElementById('searchForm').submit();
      }
});

表单提交适用于Button，但不适用于Enter键

3 个答案: