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>

Javascript搜索表单代码

1 个答案: