Javascript搜索表单代码

Question

我有一个搜索表格，我想使用在我的网站输入文本在一个框和使用单选按钮选择搜索引擎(或者我的网站搜索或我的图书馆目录)。

此代码适用于Firefox和Chrome，但不适用于IE和Safari：

<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var submitto = sf.sengines.value + escape(sf.searchterms.value);
window.location.href = submitto;
return false;
}
</script>

<form name="searchform" onSubmit="return dosearch();">
<input type="text" name="searchterms" size="20">
<input type="submit" name="SearchSubmit" value="Search">
<br />
<input type="radio" name="sengines" checked value="http://chelmsford.mvlc.org/search/keyword/">Catalog &nbsp;&nbsp;&nbsp;
<input type="radio" name="sengines" value="http://chelmsfordlibrary.org/?s=">Site
</form>

我也有这样的代码，它在IE中工作，但在Firefox中不起作用：

<script>
function myFunction() {
var engine = document.forms[0];
var txt = "";
var term = escape(document.radiosearch.searchterms.value)
var i;
for (i = 0; i < engine.length; i++) {
    if (engine[i].checked) {
        txt = txt + engine[i].value;
    }
}
window.location.href = txt + term;
}
</script>

<form name="radiosearch" onSubmit="return myFunction();">
<input type="text" name="searchterms" size="20">
<input type="submit" value="Search">
<br />
<input type="radio" name="engine" value="http://chelmsford.mvlc.org/search/keyword/" checked>Catalog</input> &nbsp;&nbsp;&nbsp;
<input type="radio" name="engine" value="http://chelmsfordlibrary.org/?s=">Site</input>
</form>

如何合并或更正这些代码，以便在所有浏览器中都能工作？

Answer 1

您正在使用非标准的方法来获取单选按钮值。我建议在Chrome、IE和Firefox中使用它(我没有能力尝试Safari，但它也应该在那里工作)：

function dosearch() {
    var sf = document.searchform;
    var searchLocation = sf.querySelector('input[name="sengines"]:checked').value;
    window.location.href = searchLocation + encodeURIComponent(sf.searchterms.value);
    return false;
}

下面是一个有用的演示，它记录了它将转到的URL：https://jsfiddle.net/jfriend00/h873sfgw/

FYI是一种获取单选按钮组值的老式方法，它涉及手动遍历每个单选按钮，直到找到一个是.checked。您可以使用如下所述的函数来完成这一任务：http://www.dyn-web.com/tutorials/forms/radio/get-selected.php

下面是上面解决这个问题的“老式”方法之一的代码，这些方法适用于IE的旧版本：

​

function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}

function dosearch() {
    var form = document.getElementById("searchform");
    var terms = document.getElementById("searchterms")
    var searchLocation = getRadioValue(form, "sengines");
    //window.location.href = searchLocation + encodeURIComponent(terms.value);
    log(searchLocation + encodeURIComponent(terms.value));
    return false;
}

function getRadioValue(formObj, groupName) {
    var inputs = formObj.getElementsByTagName("input"), item;
    for (var i = 0; i < inputs.length; i++) {
        item = inputs[i];
        if (item.type === "radio" && item.name === groupName && item.checked) {
            return item.value;
        }
    }
}

<form id="searchform" name="searchform" onsubmit="return dosearch();">
<input type="text" id="searchterms" name="searchterms" size="20">
<input type="submit" name="SearchSubmit" value="Search"">
<br />
<input type="radio" name="sengines" checked value="http://chelmsford.mvlc.org/search/keyword/">Catalog &nbsp;&nbsp;&nbsp;
<input type="radio" name="sengines" value="http://chelmsfordlibrary.org/?s=">Site
</form>

​