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/

---

仅供参考，一种获取单选按钮组值的老式方法，涉及手动迭代每个单选按钮，直到找到.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>