Javascript在提交前检查表单字段值

我的网站上有一个搜索框，可以搜索图书数据库。将向用户提供以下选项：

• 搜索查询（文本输入字段）
• 搜索位置（包含选项的选择字段：当前、存档或全部）
• 要搜索的内容（带有选项的选择字段：标题、作者、所有者或读者）

当用户输入到搜索字段时，会弹出下面的图书标题建议，就像谷歌在搜索时所做的那样。我想知道如何检查他们选择搜索的选项（即标题、作者等），并相应地显示建议

我目前使用的代码如下：

HTML 文件“get_hint.php”执行所有处理和查询数据库，并将结果作为txtHint元素的innerHTML返回

选择“按作者”选项后，getSearchBy函数似乎不会返回“作者”，有什么想法吗

更新 我知道这些答案中有许多可能是正确的，但我在最快到达的答案上做了标记。

---

谢谢大家的快速回复

您正在使用选择/选项，并希望检索所选选项的值。这还不在你的js中。你应该这样做：

document.getElementById("input[name='searchBy']").value;

（尚未测试）

或更动态地，在更改时：

$("input[name='searchBy']").change(function(){
if($(this).is(':selected')){ 
///do something
}});

---

这方面的问题

document.getElementById('searchBy').value

您正在搜索id为“searchBy”的元素。但是元素名称是searchBy而不是id。因此，请为select元素添加id='searchBy'。并从选项中删除id='searchBy'

<select name='searchBy' id='searchBy' onChange='getSearchBy(this.value)'>
      <option  value='Title' selected>By Title</option>
      <option  value='Author'>By Author</option>
      <option  value='Owner'>By Owner</option>
      <option  value='Reader'>By Reader</option>
     </select>

按标题
作者
所有者
读者

您的HTML代码中有多个具有相同id属性的项。 如果将标记更改为：

<form method='get' action='/main'>
 <label for='search'>Search</label>
 <div style='position:relative;display:inline;'>
  <input type='text' id='search' name='search' autocomplete='off'/>
  <div style='display:inline;' id='txtHint'></div>
 </div>
 <select id='searchIn' name='searchIn'>
  <option value='current' selected>Current</option>
  <option value='archive'>Archive</option>
  <option value='all'>All</option>
 </select>
 <select id='searchBy' name='searchBy'>
  <option value='Title' selected>By Title</option>
  <option value='Author'>By Author</option>
  <option value='Owner'>By Owner</option>
  <option value='Reader'>By Reader</option>
 </select>
 <input type='submit' class='submit' value='Submit'/>
</form>

---

（问题是从jQuery开始的，所以我假设，您已经将它包括在您的项目中了）

是不是：

…是（':selected'）…

？是的，很抱歉，它应该忽略了这个问题。谢谢这似乎起作用了。。。我将标记它正确时，我完成更改代码，它的工作。。。

<select name='searchBy' id='searchBy' onChange='getSearchBy(this.value)'>
      <option  value='Title' selected>By Title</option>
      <option  value='Author'>By Author</option>
      <option  value='Owner'>By Owner</option>
      <option  value='Reader'>By Reader</option>
     </select>

<form method='get' action='/main'>
 <label for='search'>Search</label>
 <div style='position:relative;display:inline;'>
  <input type='text' id='search' name='search' autocomplete='off'/>
  <div style='display:inline;' id='txtHint'></div>
 </div>
 <select id='searchIn' name='searchIn'>
  <option value='current' selected>Current</option>
  <option value='archive'>Archive</option>
  <option value='all'>All</option>
 </select>
 <select id='searchBy' name='searchBy'>
  <option value='Title' selected>By Title</option>
  <option value='Author'>By Author</option>
  <option value='Owner'>By Owner</option>
  <option value='Reader'>By Reader</option>
 </select>
 <input type='submit' class='submit' value='Submit'/>
</form>

var searchField = $("#search")
    .on("keyup", function(){
        $.get('get_hint.php', 
            {
                "q": searchField.val(),
                "searchBy": $("#searchBy").val()
            }, 
            function(data){
                $("#txtHint").html(data);
            });     
    });