提交 GET 表单后如何将变量插入结果 url 参数字符串？

Question

我有一个表单可以查询另一个站点上的图书馆数据库。如果我只包含 "format" 和 "keyword" 的输入字段，它会完美地工作，因为传递给 url 的结果参数以正确的顺序出现并且目标站点可以识别它。

但是，我还需要我的表单有一个 select 的输入字段，以便按 "Author"、"Title"、"Subject" 等进行搜索。这就是导致问题。如果目标站点位于 url 的中间（在关键字参数内），则目标站点只会识别此参数。

我当前的结果url: http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=harry&searchscope=50&SORT=D&m=b

我需要 url 的样子： http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=t:(harry)&searchscope=50&SORT=D&m=b

如果比较两者，您会发现一些差异。首先，忽略 harry 两边的括号。那没有什么区别。 真正的问题是如何将 "t:" 插入到我的 url 中？ "t:" 来自 selecting "Title" 作为搜索依据。

这是我当前的表单 HTML（如果您删除底部的 "searchtype" select 框，表单将无错误地执行，但我需要它来执行。 )

<form class="form-inline" role="search" method="get" name="searchform" id="searchform" action="http://alpha2.suffolk.lib.ny.us/search~S50/X">
                  <div class="form-group" style="float: left; margin-top: 6px;">
                    <label class="form-title">Search Collection</label>
                  </div>
                  <div class="form-group">
                    <input type="text" value="" name="SEARCH" id="SEARCH" placeholder="Enter Search Terms..." />
                    <input type="hidden" value="50" name="searchscope" />
                    <input type="hidden" value="D" name="SORT" />
                  </div>
                  <div class="form-group" style="float: left; margin-top: 3px;">
                    <label for="searchformat">For:</label>
                    <select name="m" id="m">
                            <option value="">ANY</option>
                            <option value="a">BOOK</option>
                            <option value="e">EBOOK DOWNLOAD</option>
                            <option value="l">LARGE PRINT BOOK</option>
                            <option value="b">BLU-RAY</option>
                            <option value="g">DVD</option>
                            <option value="i">AUDIO BOOK CD</option>
                            <option value="h">AUDIO BOOK MP3CD</option>
                            <option value="x">EAUDIOBOOK DOWNLOAD</option>
                            <option value="q">PLAYAWAY</option>
                            <option value="j">MUSIC CD</option>
                            <option value="p">MAGAZINE/NEWSPAPER</option>
                            <option value="n">EMAGAZINE DOWNLOADS</option>
                            <option value="v">PLAYAWAY VIEW</option>
                            <option value="s">VIDEO GAME</option>
                            <option value="r">CD-ROM</option>
                            <option value="d">VHS</option>
                            <option value="t">GAMES/PUZZLES</option>
                            <option value="f">DIGITAL IMAGE</option>
                            <option value="z">EVIDEO DOWNLOADS</option>
                            <option value="y">EMUSIC DOWNLOADS</option>
                            <option value="c">SHEET MUSIC</option>
                            <option value="m">MAP</option>
                            <option value="w">ONLINE RESOURCE</option>
                            <option value="o">OTHER MATERIALS</option>
                    </select>
                  </div>
                  <div class="form-group" style="float: left; margin-top: 3px;">
                    <label for="searchtype">By:</label>
                    <select name="" id="searchtype">
                            <option value="a:"> Author</option>
                            <option value="t:"> Title</option>
                            <option value="d:"> Subject</option>
                            <option value="N:"> Note</option>
                            <option value="" selected="selected"> Keyword</option>
                    </select>
                  </div>
                  <button class="btn btn-primary" id="searchsubmit" type="Submit">GO</button>
                </form>

编辑：

尝试Javascript（如评论中要求）：

<script>
function searchSubmit() {
    m = document.getElementById("m").value;
    t = document.getElementById("searchtype").value;
    a = document.getElementById("searcharg").value;
    var newurl = "alpha2.suffolk.lib.ny.us/search/X~S22?SEARCH="; + t + a + "&searchscope=50&SORT=D&m=" + m;
    var searchform = document.getElementById("searchform");
    searchform.action = newurl; searchform.submit();
} 
</script>

Answer 1

我要做的是获取搜索类型值并在提交前将其添加到输入搜索中。这是一个 JS-fiddle 示例：

$(document).ready(function(){
    $("#searchform").on("submit", function(e){
        var keyWord = $("#SEARCH").val();
        var searchtype = $("#searchtype").val();
        $("#SEARCH").val(searchtype + keyWord);
    });
});

Answer 2

如果您想使用 JavaScript 方法，则必须使用 AJAX 并阻止按钮的默认行为。

document.getElementById("searchsubmit").addEventListener("click", function(event){
  event.preventDefault();
  var xhttp = new XMLHttpRequest();
  //here you set up your variables. One example is 
  var mysearch = "SEARCH=" + document.getElementById("searchtype").value + document.getElementById("SEARCH").value;
  xhttp.open("GET", "yourURL?" + yourVariables, true);
  xhttp.send();
});

提交 GET 表单后如何将变量插入结果 url 参数字符串？

How can I insert a variable into the resulting url parameter string after submitting my GET form?

javascript

html

forms

url-parameters