HTML form change url parameters based on select option

Question

I have an HTML form which redirects to another website. The thing is I want to change the URL parameters based on select option.

This form when "keyword" is selected, the URL is https://library.econ.upd.edu.ph/ir/discover?scope=123456789%2F6&scope=&query=web which should be the case. What I want to do is that when option for "Title" and "Author" is chosen, "&scope=" should be omitted.

Can this be achieved with Vanilla Javascript? Jquery would also do. I have yet to read URL params in javascript if this is the way to go in order to achieve what I want to achieve.

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

The answer is yes it can. Can you update the snippet I made you with your attempts? Have a look at URLSearchParams — mplungjan
– mplungjan, Commented Jul 25, 2020 at 8:55
Hi! Updated the snipped I guess. Went through edit then save. — schnydszch
– schnydszch, Commented Jul 25, 2020 at 9:04
Edit, scroll Dow, click edit above snippet, paste JavaScript into bottom left pane — mplungjan
– mplungjan, Commented Jul 25, 2020 at 9:36
1. you have two elements named scope. 2. You cannot have IDs on options — mplungjan
– mplungjan, Commented Jul 25, 2020 at 14:41

mplungjan · Accepted Answer · 2020-07-27 07:49:02Z

Have a look at this.

Updated after looking at your version

NOTE the value on the options instead of IDs which are not valid HTML

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

Hi Thanks for the hint, I was able to adjust your code to my use case. I will present it in an answer.

schnydszch · Accepted Answer · 2020-07-27 07:45:00Z

UPDATE: Still putting this one here, but mplungjan's code has less line of codes than mine.

Upon inspection of the latest answer by mplungjan, I only need to adjust this code:

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

to this code:

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

So the final jquery code is below:

$(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);
  })
});

Thanks a lot mplungjan! :)

schnydszch · Accepted Answer · 2020-07-27 07:54:12Z

0

UPDATE2: Added javascript code just in case jquery is not present for other people with similar use case as mine. Following the hint from mplungjan, here are the codes for my use case. Jquery below:

$(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);
  
    }      
  
})
});

And below is the adjusted html code:

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

This works for my application that has jquery but not sure yet if I ported this to another application which I'm not sure if it has jquery. I had to use else if-else statement using condition for the select option value "keyword".

The JAVASCRIPT CODE:

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

edited Jul 27, 2020 at 7:54

answered Jul 26, 2020 at 9:48

schnydszch

4355 silver badges24 bronze badges

6 Comments

mplungjan Over a year ago

Your code is not DRY. Please see the second version I posted after seeing your version. It can be simplified at lot

schnydszch Over a year ago

Hi thanks for this. I've tried the code but it seems we need to adjust because if title and author is selected, "&query" should be omitted like from "library.econ.upd.edu.ph/ir/discover?scope=123456789/…" to "library.econ.upd.edu.ph/ir/discover?scope=123456789/…". For the keyword, it works perfectly. Thanks!

mplungjan Over a year ago

How des the user then search for title or author?

schnydszch Over a year ago

Hi! Search parameters should be like this: "scope=123456789/6&filtertype_1=title&filter_relational_operator_1=contains&filter_1=web" Notice that &query is omitted. I'm thinking of adding replace in the statement "url += isKeyword ? "" : &filtertype_1=${val}&filter_relational_operator_1=contains&filter_1 " but I'm getting some errors. "&query" can't be ignored because it is a parameter in my text input with id "ebscohostsearchtext".

schnydszch Over a year ago

Hi! When I tried your updated code, it seems when I replace the words to search, first words inputted is instead inputted into the query, because we still have to put encodeURIComponent(q) in the else clause? like so "url += isKeyword ? "&query=" + encodeURIComponent(q) : "" + encodeURIComponent(q);"

|

Collectives™ on Stack Overflow

HTML form change url parameters based on select option

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related