`window.location.href`只是刷新页面

Question

这有点令人困惑,但我会尽力解释它.我有4个select菜单直接放在一起,有absolute定位.在任何时候,其中三个是不可见的(带display: none;),而其中一个是可见的(带display: inline;).我有一个JavaScript代码,可以检测哪个是可见的,然后它应该获取input字段的值,将其附加到可见的值select,然后转到该URL.

这是代码中的基本思想:

<form onsubmit="goTo()">

    <input type="text" id="query" value="" />

    <select class="service">
      <option value="https://www.google.com/search?q=" selected>Web</option>
      <option value="https://www.google.com/search?tbm=isch&q=">Images</option>
      <option value="https://www.google.com/maps?q=">Maps</option>
    </select>

    <select class="service">
      <option value="http://search.yahoo.com/search?p=" selected>Web</option>
      <option value="http://search.yahoo.com/search/images?p=">Images</option>
      <option value="http://search.yahoo.com/search/video?p=">Videos</option>
    </select>

    <select class="service">
      <option value="http://www.bing.com/?q=" selected>Web</option>
      <option value="http://www.bing.com/images/?q=">Images</option>
      <option value="http://www.bing.com/videos/?q=">Videos</option>
    </select>

    <select class="service">
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/web?q=" selected>Web</option>
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/images?q=Greeny">Images</option>
      <option value="http://www.dogpile.com/info.dogpl.t6.2/search/video?q=">Videos</option>
    <select>

    <button type="submit">Search</button>

和JavaScript(有比这更多的代码,但我只包括相关部分:

function goTo() {
  var value
  var elements = document.getElementsByClassName('service');
    for (var i = 0; i < elements.length; i++) {
      if(elements[i].style.display === 'inline') {
        value = elements[i].value;
        window.location.href = value + document.getElementById("query").value;
        break;
      }
    }
}

我的问题是,当我点击提交时发生的所有事情都是页面重新加载.

http://jsfiddle.net/9BLAv/3/

Answer 1

您需要停止"提交"事件的默认操作,即重新加载页面.

将表单标记更改为:

<form onsubmit='goTo(); return false'>

您也可以通过操作事件对象显式阻止默认操作来执行此操作,但我认为false从处理程序返回是非常通用的.