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

Posted 2023-02-22

【中文标题】HTML 表单根据选择选项更改 url 参数

【英文标题】：HTML form change url parameters based on select option

【发布时间】：2020-11-15 01:46:23

【问题描述】：

我有一个重定向到另一个网站的 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>

【问题讨论】：

答案是可以的。你能用你的尝试更新我给你做的sn-p吗？看看URLSearchParams

嗨！更新了我猜的截图。完成编辑然后保存。

编辑，滚动Dow，点击sn-p上方的编辑，将JavaScript粘贴到左下窗格

通过 ajax 提交表单并将所需的参数传递给它。

1.您有两个名为 scope 的元素。 2. 选项上不能有 ID

【参考方案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>

【讨论】：

您好，感谢您的提示，我能够根据我的用例调整您的代码。我将在答案中提出。

【参考方案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！ :)

【参考方案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>

【讨论】：

您的代码不是 DRY。请参阅我在看到您的版本后发布的第二个版本。可以大量简化

您好，谢谢。我已经尝试了代码，但似乎我们需要调整，因为如果选择了标题和作者，则应省略“&query”，如从“library.econ.upd.edu.ph/ir/discover?scope=123456789/…”到“library.econ.upd.edu.ph/ir/discover?scope=123456789/…”。对于关键字，它完美地工作。谢谢！

用户如何搜索标题或作者？

嗨！搜索参数应该是这样的： "scope=123456789/6&filtertype_1=title&filter_relational_operator_1=contains&filter_1=web" 注意 &query 被省略了。我正在考虑在语句 "url += isKeyword ? "" : &filtertype_1=$val&filter_relational_operator_1=contains&filter_1" 中添加替换，但我遇到了一些错误。不能忽略“&query”，因为它是我的文本输入中的一个参数，ID 为“ebscohostsearchtext”。

嗨！当我尝试您更新的代码时，似乎当我替换要搜索的单词时，输入的第一个单词被输入到查询中，因为我们仍然必须将 encodeURIComponent(q) 放在 else 子句中？像这样 "url += isKeyword ? "&query=" + encodeURIComponent(q) : "" + encodeURIComponent(q);"