根据所选项目更改表单操作 - Change form action based on selected item

我是html的新手，但我需要使这块代码起作用：

    <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">

我希望能够选择说一个标题，然后输入一个标题，然后点击搜索，让它像我在此页面中输入的那样工作http://cat.opal-libraries.org/search/t我将不胜感激任何关于这样做的建议！

很抱歉没有回答，但正如我提到的，你的问题的答案太长了，不适合堆栈溢出。

我建议你按照这样的PHP教程弄脏你的手。

作为旁注，您的 HTML 无效。您在第 1 行和第 2 行打开了<form>和<p>标记，但没有关闭它们。从语义上讲，将这些表单元素放在段落中有点奇怪。这不是一个段落真正的作用。

这个问题非常广泛，因为有很多方法可以解决这个问题。下面是对代码的简单编辑，如果要按标题搜索，则可以使其正常工作：

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

我所做的是修复您的 URL 并为输入命名。您可能想阅读<form method="get"的工作原理，然后您可能可以弄清楚如何按不同字段进行搜索。

更新以包含完整代码。如果您阅读这些项目以了解它如何/为什么工作，那就太好了。基本上，当他们选择新的搜索类型时，您需要更改表单的操作（即您缺少的部分）。我还添加了"搜索范围"字段并将其设置为 28，因为他们的网站正在这样做。我不知道这是做什么的。

这假设你引用的是jQuery。相关文档 jQuery attr（）和 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>

看起来你引用的搜索引擎为每个"搜索类型"使用一个单独的端点，这实际上使得使用Javascript相对容易做到这一点，并且对表单进行了一些更改。

将<select>上的 name 属性更改为id，以便它实际上不会发送到搜索引擎。
将文本字段的name属性更改为"SEARCH"，以便将其发送并识别为搜索字符串。

添加到 sel，该侦听器会根据需要修改表单的操作属性。如果您使用的是 JQuery，则可能如下所示：

var base = "http://cat.opal-libraries.org/search/";
$("#searchtype").change(function() {
  $(that).closest("form").attr("action", base + $(that).val());
});