Change form action based on selected item - php

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

Sorry for the non-answer, but as I mentioned, the answer to your question would be too long to be suited to Stack Overflow.
I suggest you get your hands dirty by following a PHP tutorial like this one.
As a side note, your HTML is invalid. You opened <form> and <p> tags on lines 1 and 2, and didn't close them. Semantically, it's a little strange placing those form elements in a paragraph. That's not really what a paragraph does.

Answer 2

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>

Answer 3

It looks like the search engine you're referencing uses a separate endpoint for each "searchtype," which actually makes this relatively easy to do with Javascript and a couple changes to your form.
Change the name attribute on the <select> to an id instead, so that it isn't actually sent to the search engine.
Change the name attribute of the text field to "SEARCH" so that it will be sent and recognized as the search string.
Add an on-change listener to the sel which modifies the action attribute of the form as appropriate. If you're using JQuery, that might look something like this:
var base = "http://cat.opal-libraries.org/search/";
$("#searchtype").change(function() {
$(that).closest("form").attr("action", base + $(that).val());
});