如何在提交我的GET表单后将变量插入到生成的url参数字符串中?

时间:2021-01-15 21:11:52

I have a form that queries a library database on another site. It works perfectly if I only include input fields for the "format" and "keyword" because the resulting parameters passed to the url come out in the correct order and the destination site recognizes it.

我有一个表单查询另一个站点上的库数据库。如果我只包含“格式”和“关键字”的输入字段,它会完美地工作,因为传递给网址的结果参数按正确的顺序出现,目标网站会识别它。

However, I also need my form to have an input field to select to search by "Author", "Title", "Subject" etc. This is what causes the problem. The destination site only recognizes this parameter if it is in the middle of the url (inside the keyword parameter).

但是,我还需要我的表单有一个输入字段来选择搜索“作者”,“标题”,“主题”等。这是导致问题的原因。如果目标站点位于URL的中间(在关键字参数内),则它仅识别此参数。

My current resulting url: http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=harry&searchscope=50&SORT=D&m=b

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

What I need the url to look like: http://alpha2.suffolk.lib.ny.us/search~S50/X?SEARCH=t:(harry)&searchscope=50&SORT=D&m=b

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

If you compare the two you will notice a couple differences. First, ignore the parentheses around harry. That doesn't make a difference. The real issue is how do I get the "t:" to be inserted into my url? The "t:" comes from selecting "Title" as the thing to search by.

如果你比较两者,你会发现一些差异。首先,忽略哈里周围的括号。这没有什么区别。真正的问题是如何将“t:”插入我的网址? “t:”来自选择“标题”作为搜索的东西。

Here is my current form HTML (If you remove the "searchtype" select box at the bottom the form will execute without errors, but I need it to execute with it.)

这是我当前的表单HTML(如果你删除底部的“searchtype”选择框,表单将执行没有错误,但我需要它来执行它。)

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

EDIT:

The attempted Javascript (as requested in the comments):

尝试过的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>

2 个解决方案

#1


0  

What I would do is get the searchtype-value and add it to the input-search before submitting. Here is a JS-fiddle example:

我要做的是获取searchtype-value并在提交之前将其添加到输入搜索中。这是一个JS小提琴的例子:

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

#2


0  

If you want to use the JavaScript approach, you will have to use AJAX and prevent the default behavior of the button.

如果要使用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();
});

#1


0  

What I would do is get the searchtype-value and add it to the input-search before submitting. Here is a JS-fiddle example:

我要做的是获取searchtype-value并在提交之前将其添加到输入搜索中。这是一个JS小提琴的例子:

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

#2


0  

If you want to use the JavaScript approach, you will have to use AJAX and prevent the default behavior of the button.

如果要使用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();
});