javascript的表单按钮不起作用，但在我的网址末尾添加了“ /？”

Question

我有一些简单的代码... HTML：

    <form>
        <input type="text" placeholder="Search.." id='query'>
        <button type="button" name="submitButton" id="submitBtn2" onclick="submitBtn()">SEND</button>
    </form>


<iframe id="results" name="results" onload='javascript:resizeIframe(this);' src="javascript:void(0);"></iframe>

使用Javascript：

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<script language="javascript" type="text/javascript">
  function submitBtn() {
    var search = document.getElementById('query').value;
    console.log("search:" +search);
    console.log(search.length)
    if (search.length>0){
      document.getElementById('results').src = 'data:text/html;charset=utf-8,' + escape('<h2>'+ search +'</h2>');
      userAction(search);
    }
  }
</script>

<script language="javascript" type="text/javascript">
  function userAction(res) {

    var request = new XMLHttpRequest();
    var api = 'myAPI';
    var url= api + res;
    request.open('GET', url, true);
    request.onload = function () {

        var data = this.response;

        if (request.status >= 200 && request.status < 400) {
            document.getElementById('results').src = "data:text/html;charset=utf-8," + escape(data);
        } else {
            console.log('error');
        }
    }
    request.send();
}

</script>

问题：如果我有一个空白的query字段，则单击按钮时一切正常（不进行任何更改，并且可以从submitBtn()内部看到日志），但是如果我在query字段中输入一个值，则当我单击按钮时，它不会触发我的submitBtn()函数。

而是将我的网址重定向到“ mycurrenturl” /？ -我不确定为什么要这样做并添加/? 到我的网址末尾。

我尝试访问的api是Azure函数HttpTrigger。 我没有从我的submitBtn()函数中获取console.log ，所以我假设当输入值时表单存在问题吗？

任何帮助将非常感激。

谢谢！

Answer 1

仅当您在文本字段中按Enter时，才会发生此问题。 提交表单，但不会触发单击按钮。 解决方案是使用表单的onsubmit处理程序：

<form onsubmit="submitBtn(); return false;">

return false; 防止发生默认的提交操作。

如果这样做，还可以从提交按钮中删除onclick ，并将其更改为type="submit" 。 然后单击按钮将触发表单提交，然后将运行上面的代码。