Question

I’m new to html, but I need to make this block of code functional:

    <form method="get" action="http://cat.opal-libraries.org/search~S9/X">
     <p>
     <select name="searchtype">
    <option value="X" selected="selected">Keyword</option>
    <option value="t">Title</option>
    <option value="a">Author</option>
    <option value="d">Subject</option>
    </select>
    <input class="textfield" name=" " style="width: 200px;" type="text">
    <input class="button" value="Search" type="submit">

I want to be able to select say a Title, and enter in a title, and hit search, and have it work like i entered it in this page
http://cat.opal-libraries.org/search/t
I would appreciate any suggestions on doing this!

Answer 1

Question is very broad as there are many ways to approach it. Here is a simple edit of your code that makes it work if you want to search by title:

<form method="get" action="http://cat.opal-libraries.org/search/t">   
  <input class="textfield" name="SEARCH" style="width: 200px;" type="text">
  <input class="button" value="Search" type="submit">
</form>

What I did was fix your URL and give a name to the input. You probably want to read up on how <form method="get" works and then you can probably figure out how to search by different fields.

Updated to include full code. It’d be good if you read up on these items to find out how/why it works. Basically when they choose a new search type, you need to change the action of the form (that is the piece you were missing). I also added the “searchscope” field and set it to 28 since their website was doing that. I don’t know what that does.

This assumes you are referencing jQuery. Related documentation jQuery attr() and jQuery change().

<form id="searchForm" method="get" action="http://cat.opal-libraries.org/search/X">  
    <select id="searchType">
    <option value="X" selected="selected">Keyword</option>
    <option value="t">Title</option>
    <option value="a">Author</option>
    <option value="d">Subject</option>
    </select>
  <input class="textfield" name="SEARCH" style="width: 200px;" type="text">
  <input name="searchscope" type="hidden" value="28">
  <input class="button" value="Search" type="submit">
</form>

<script>
    $("#searchType").change(function () {
        var newPath ="http://cat.opal-libraries.org/search/" + $("#searchType").val();
        $("#searchForm").attr("action", newPath);
    });
</script>