Form Field options change the URL by date and item number

Question

I'm creating a form with 2 fields - a calendar and an option of 2 product items. The URL that this then goes to needs to changed based on what the user has selected in the form. How would I do this? This is the url that they go to:

https://example.com/reserve/?date=2018-12-24&item_id=229&popup=1

The items that need to be variable are:

date=2018-12-24 and item_id=229

I found good options for the item_id but am stuck with inputting the date format, too.

This is an example of my current form, that obviously doesn't work quite right:

<form method="get" action="http://example.com/url1">
<input type="date" name="bday">
   <select name="_" onchange="this.form.action=this.value">
     <option value="http://example.com/url1">Item 1</option>
     <option value="http://example.com/url2">Item 2</option>
   </select>

   <input type="submit" value="Submit" />
</form>

Answer 1

I assume, you do not want to send all the form values as query string. If that is the case, you can try to cancel the original submit event and redirect to the selected page with query string. See How do I redirect to another webpage?

<form method="get" id="myForm" action="http://example.com/url1">
    <input type="date" name="bday">
    <select name="actionUrl">
        <option value="http://example.com/url1">Item 1</option>
        <option value="http://example.com/url2">Item 2</option>
    </select>

    <input type="submit" value="Submit" />
</form>

<script type="text/javascript">
    $(document).ready(function(){
        $("#myForm").on('submit', function(e){
            e.preventDefault();
            var bday = $(this).find('input[name="bday"]').val();
            var url = $(this).find('select[name="actionUrl"]').val();
            url += "?bday="+bday;

            window.location.replace(url);
        });
    });
</script>

Result:

http://example.com/url2?bday=2011-11-11