Serialize multiple inputs into a single parameter

user_159118 0
Viewed 114

I have the following form:

<form method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>

On submit of the form the generated URL is: https://example.com/?search=inbox&filter=draft&filter=10%2F10%2F2020

This results in 1 search parameter and 2 filter parameters being sent:

search=inbox

filter=draft

filter=10%2F10%2F2020

What I would like to do is send 1 search parameter and value, and 1 filter parameter with 2 values.

Ideally the url would look like this:

https://example.com/?search=inbox&filter=draft&10%2F10%2F2020

The result being 1 search parameter, and 1 filter parameter with 2 values being sent:

search=inbox

filter=draft&10%2F10%2F2020

Can I join these 2 filter input fields into a single query string?

$( "#target" ).submit(function( event ) {
  var datastring = $("#target").serialize();
  console.log(datastring);
  event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<form id="target" method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>

forms html javascript
1 Answers

Its not a mistake to send 2 input field values in a query string, but you have to deal with it on the server end. ie, you will will need to know to split the 2 values.

$( "#target" ).submit(function( event ) {
  var datastring = '?search='+$("#search-input").val()+'&filter='+$("#filter-type").val();
  //datastring = datastring + add a delimiter in here

  datastring = datastring + $("#filter-start-date").val();
  console.log(datastring);
  event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<form id="target" method="get">
  <input id="search-input" name="search" value="inbox" placeholder="Search ..." type="text">
  <input id="filter-type" name="filter" value="draft" type="text">
  <input id="filter-start-date" name="filter" value="10/10/2020" type="text">
  <button type="submit">Search</button>
</form>

user_22617330
Related