HTML 表单根据选择选项更改 url 参数

Question

我有一个重定向到另一个网站的 HTML 表单。问题是我想根据选择选项更改 URL 参数。

This form when "keyword" is selected, the URL is https://library.econ.upd.edu.ph/ir/discover?scope=123456789%2F6&scope=&query=web 应该是这样。我想做的是，选择“标题”和“作者”选项时，应省略“＆scope =”。

这可以用 Vanilla Javascript 实现吗？ Jquery 也可以。如果这是实现我想要实现的目标，我还没有阅读 javascript 中的 URL 参数。

<div class="search-form">
  <div style="background-color: rgba(255,255,255,0.85);">
    <div class="form-group"><b>Search:</b>
      <form id="ebscohostCustomSearchBox" class="form-inline" style="overflow: auto;" action="https://library.econ.upd.edu.ph/ir/discover" method="get" target="_blank">
        <input id="scope" name="scope" type="hidden" value="123456789/6" />
        <select id="delimiter" class="delimiterselect" style="width: 120px; border: 1px solid #540000;" name="scope" size="1" onchange="#">
          <option id="keyword" selected="selected" value="">Keyword</option>
          <option id="title" value="title&filter_relational_operator_1=contains&filter_1">Title</option>
          <option id="author" value="author&amp;filter_relational_operator_1=contains&amp;filter_1">Author</option>
        </select>

    </div>
    <div class="form-group">
      <input id="ebscohostsearchtext" class="form-control" style="border: 1px solid #540000;" name="query" size="50" type="text" placeholder="Search for books, articles, databases and more" /></div>
    <div class="form-group"><input class="search" style="border: 1px solid #540000;" type="submit" value="SEARCH" /></div>
    </form>
  </div>
</div>

Answer 1

看看这个。

查看您的版本后更新

注意选项上的值而不是无效 HTML 的 ID

$(document).ready(function() {
  $("#ebscohostCustomSearchBox").on("submit", function(e) {
    e.preventDefault()
    const q = $("#ebscohostsearchtext").val().trim();
    if (q === "") return;

    const searchType = $("#selectid").val()
    const isKeyword = searchType === "keyword";
    let url = this.action;
    url += "?scope=" + (isKeyword ? "123456789/6" : "123456789/6");
    url += isKeyword ? "&query=" : `&filtertype_1=${searchType}&filter_relational_operator_1=contains&filter_1=` 
    url += encodeURIComponent(q);
//    window.location.href = url;
    console.log(url);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-form">
  <div style="background-color: rgba(255,255,255,0.85);">
    <div class="form-group"><b>Search:</b>
      <form id="ebscohostCustomSearchBox" class="form-inline" style="overflow: auto;" action="https://library.econ.upd.edu.ph/ir/discover" method="get" target="_blank">
        <input id="scope" name="scope" type="hidden" value="123456789/6" />
        <select id="selectid" class="delimiterselect" style="width: 120px; border: 1px solid #540000;" name="query" size="1">
          <option value="keyword" selected="selected">Keyword</option>
          <option value="title">Title</option>
          <option value="author">Author</option>
        </select>

    </div>
    <div class="form-group">
      <input id="ebscohostsearchtext" class="form-control" style="border: 1px solid #540000;" name="query" size="50" type="text" placeholder="Search for books, articles, databases and more" /></div>
    <div class="form-group">
      <input class="search" style="border: 1px solid #540000;" type="submit" value="SEARCH" />
    </div>
    </form>
  </div>
</div>

Answer 2

更新：仍然把这个放在这里，但是 mplungjan 的代码比我的少。

通过mplungjan查看最新答案，我只需要调整这段代码：

url += "&query=" + encodeURIComponent(q);

到此代码：

url += isKeyword ? "&query=" + encodeURIComponent(q) : "=" + encodeURIComponent(q);

所以最终的jquery代码如下：

$(document).ready(function() {
  $("#ebscohostCustomSearchBox").on("submit", function(e) {
    e.preventDefault()
    const q = $("#ebscohostsearchtext").val().trim();
    if (q === "") return;
    const val = $("#selectid").val()
    const isKeyword = val === "keyword";
    let url = this.action;
    url += "?scope=" + (isKeyword ? "123456789/6" : "123456789/6");
    url += isKeyword ? "" : `&filtertype_1=${val}&filter_relational_operator_1=contains&filter_1` 
    url += isKeyword ? "&query=" + encodeURIComponent(q) : "=" + encodeURIComponent(q);
    //url += "&query=" + encodeURIComponent(q);
//    window.location.href = url;
    console.log(url);
  })
});

非常感谢mplungjan！ :)

Answer 3

UPDATE2：添加了 javascript 代码，以防 jquery 不存在于与我类似用例的其他人。 按照 mplungjan 的提示，这里是我的用例的代码。下面是jquery：

$(document).ready(function(){
const filters = {
  "title": "filtertype_1=title&filter_relational_operator_1=contains&filter_1",
  "author": "filtertype_1=author&filter_relational_operator_1=contains&filter_1",
  "keyword": ""
}
$("#ebscohostCustomSearchBox").on("submit", function(e) {
    
    if (document.getElementById('selectid').value == "keyword") {
  e.preventDefault()
  const q = $("#ebscohostsearchtext").val().trim();
  if (q === "") return;
  let url = this.action;
  filter = filters[$("#selectid").val()];
  url += "?scope=123456789/6";
  url += filter ? "&" + filter + "&" : "?";
  url = url.replace(/\?$/,"&") + "query=" + encodeURIComponent(q);
 window.location.href = url;
  
  //console.log(url);
    } else {
  e.preventDefault()
  const q = $("#ebscohostsearchtext").val().trim();
  if (q === "") return;
  let url = this.action;
  filter = filters[$("#selectid").val()];

  url += "?scope=123456789/6";
  url += filter ? "&" + filter + "&" : "?";
  url = url.replace(/&$/,"") + "=" + encodeURIComponent(q);
  
  window.location.href = url;
  //console.log(url);
  
    }      
  
})
}); 

以下是调整后的html代码：

<div class="search-form">
<div style="background-color: rgba(255,255,255,0.85);">
<div class="form-group"><b>Search:</b>
<form id="ebscohostCustomSearchBox" class="form-inline" style="overflow: auto;" action="https://library.econ.upd.edu.ph/ir/discover" method="get" target="_blank">
<input id="scope" name="scope" type="hidden" value="123456789/6" />
<select id="selectid" class="delimiterselect" style="width: 120px; border: 1px solid #540000;" name="query" size="1" >
<option id="keyword" selected="selected" value="">Keyword</option>
<option id="title" value="title">Title</option>
<option id="author"value="author">Author</option>
</select>

</div>
<div class="form-group">
<input id="ebscohostsearchtext" class="form-control" style="border: 1px solid #540000;" name="query" size="50" type="text" placeholder="Search for books, articles, databases and more" /></div>
<div class="form-group">
<input class="search" style="border: 1px solid #540000;" type="submit" value="SEARCH" />
</div>
</form></div></div>

这适用于我的应用程序，它有 jquery，但我不确定我是否将它移植到另一个我不确定它是否有 jquery 的应用程序。对于选择选项值“关键字”，我不得不使用 else if-else 语句。

JAVASCRIPT 代码：

<script>

const filters = {
  "title": "filtertype_1=title&filter_relational_operator_1=contains&filter_1",
  "author": "filtertype_1=author&filter_relational_operator_1=contains&filter_1",
  "keyword": ""
}

//jquery: function for submitbutton: 
function submitbutton(){

//jquery: e.preventDefault()
event.preventDefault();

    const q = $("#dspacecustomsearchtext").val().trim();
    if (q === "") return;
    
    const searchType = $("#selectid").val()
    const isKeyword = searchType === "keyword";

    //in jquery: let url = this.action; 
    let url = document.getElementById('dspacecustomsearchbox').action

    url += "?scope=" + (isKeyword ? "123456789/6" : "123456789/6");
    url += isKeyword ? "&query=" : `&filtertype_1=${searchType}&filter_relational_operator_1=contains&filter_1=` 
    url += encodeURIComponent(q);

    console.log(url);

}

</script>