Question

我是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 我很感激有关这方面的任何建议！

Answer 1

很抱歉没有回答，但正如我所提到的，你的问题的答案太长，不适合Stack Overflow。

我建议你弄脏by following a PHP tutorial like this one。

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

Answer 2

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

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

我所做的是修复您的网址并为输入命名。您可能想要了解<form method="get"的工作原理，然后您可能会想出如何按不同的字段进行搜索。

已更新，以包含完整代码。如果您阅读这些项目以了解其工作原理和原因，那就不错了。基本上，当他们选择新的搜索类型时，您需要更改表单的操作（即您缺少的部分）。我还添加了＆＃34; searchscope＆＃34;现场并将其设置为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>

Answer 3

看起来你正在引用的搜索引擎为每个“searchtype”使用一个单独的端点，这实际上使得使用Javascript和对表单进行一些更改相对容易。

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

向sel添加一个on-change侦听器，它会根据需要修改表单的action属性。如果你正在使用JQuery，那可能看起来像这样：

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

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

3 个答案: