Multiple Search Options - Radio Buttons Instead Of Drop Down List

jleung · Mar 26, 2007

The tutorial on how to make a search form with multiple search options was excellent!

http://www.mediacollege.com/internet/javascript/form/multi-search.html

However, is it possible to use radio buttons instead of a drop-down list?Can someone be kind enough to show me the code for it?

Million thanks.

-Job- · Mar 26, 2007

You can do for example:

Code:

<html>
<body>
    <script language="JavaScript">eng = 'http://www.google.com/search?q=';</script>  
    For: 
    <input type="text" id="searchterms">
    <input type="button" value="Search" onload="" onclick="window.location = eng + escape(document.getElementById('searchterms').value); return false;">
    <br />Search: 
    <input type="radio" onclick="eng = this.value;" checked name="sengines" value="http://www.google.com/search?q=" />Google
    <input type="radio" onclick="eng = this.value;" name="sengines" value="http://www.altavista.com/web/results?q=" />Alta Vista
    <input type="radio" onclick="eng = this.value;" name="sengines" value="[PLAIN]http://www.dogpile.com/info.dogpl/search/web/"[/PLAIN]  />Dogpile
    <input type="radio" onclick="eng = this.value;" name="sengines" value="http://search.yahoo.com/search?p=" />Yahoo!    
</body>
</html>

ravenprp · Apr 2, 2007

Thank you for your feedback on the tutorial. I'm glad you found it helpful! As for your question about using radio buttons instead of a drop-down list, it is definitely possible and can be a great alternative for a search form. Here is a code snippet that you can use to implement radio buttons in your search form:

<form>
<input type="radio" name="searchOption" value="option1">Option 1<br>
<input type="radio" name="searchOption" value="option2">Option 2<br>
<input type="radio" name="searchOption" value="option3">Option 3
</form>

You can add more options by simply adding more <input> tags with different values for the "value" attribute. Then, in your JavaScript code, you can access the selected option by using the "value" property of the selected radio button. I hope this helps! Let me know if you have any further questions. Happy coding!

Multiple Search Options - Radio Buttons Instead Of Drop Down List

1. How do radio buttons differ from a drop-down list in multiple search options?

2. How are radio buttons more user-friendly in multiple search options?

3. Can radio buttons be used for more than just text options in multiple search options?

4. Are radio buttons the most efficient way to display multiple search options?

5. Is it possible to combine radio buttons and drop-down lists in multiple search options?

Similar threads

Hot Threads

Recent Insights