Javascript search form code

Question

I have a search form that I'd like to use on my website to enter text in one box and use radio buttons to choose the search engine (either a site search or my library's catalog).

This code works in Firefox and Chrome but not IE and 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>

And I also have this code, which works in IE but not in 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>

How can I merge or correct these so one bit of code will work in all browsers?

Answer 1

You are using non-standard ways of getting the radio button value. I'd suggest this which works in Chrome, IE and Firefox (I don't have the ability to try Safari, but it should work there too):

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;
}

And, here's a working demo that logs the URL it would go to: https://jsfiddle.net/jfriend00/h873sfgw/

---

FYI, an old-fashioned way to get the value of the radio button group, involves manually iterating through each radio button until you find the one that is .checked. You can do that with a function as described here: http://www.dyn-web.com/tutorials/forms/radio/get-selected.php

---

Here's the code for one of the above "old-fashioned" ways to solve this that works in old versions of 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>