根据所选项目更改表单操作

问题描述：

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!

答

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>

答

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.

答

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());
});
```

根据所选项目更改表单操作

相关推荐