I have 2 forms GET to filter data, when I submit the first form I have this url test.com?form1_filter['year']=2022
It works, but now if I want to submit the other form I would like to have test.com?form2_filter['users']&form1_filter['year']=2022
The problem is when I submit a form, the parameters of the second form were remove
How can I keep all parameters in url ? I tried in javascript with the event submit when it still remove my parameters.
<form id="form1" method="get">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Filter">
</div>
</form>
<form id="form2" method="get">
<select name="users" id="user-select">
<option value="1">Dad</option>
<option value="2">Mom</option>
</select>
<div>
<input type="submit" value="Filter">
</div>
</form>
It's 2 form on the same page
The form needs to have inputs for all the data you want to appear in the query string.
If you want to copy existing values without displaying a UI control for them, add them as hidden inputs.
<input type="hidden" name="form1_filter['year']" value="2022">
When you have two form on page that was loaded with URL query string, the newly sent form replaces all the parameters.
The solution is simple: Add hidden fields to the form dynamically (using server-side code) that will add the parameters back to the url.
<input type=hidden name=field-name value=field-value>
You can also do it using JS (not recommended).
Probably better solution is to redirect all requests to other URL that does not use the query string parameters. When query string is added to this URL, also redirect it (to URL that combines both). Example:
/foo?field1=bar
→ /foo/field1=bar
/foo/field1=bar?field2=baz
→ /foo/field1=bar,field2=baz
The only downside of this approach is that it is more complex on the server side.