Параметры поля формы изменяют URL-адрес по дате и номеру элемента

Question

Я создаю форму с 2 полями - календарь и вариант из 2 товаров.URL-адрес, по которому он идет, должен быть изменен в зависимости от того, что пользователь выбрал в форме.Как бы я это сделал?Это URL, по которому они переходят:

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

Элементы, которые должны быть переменными:

date = 2018-12-24 и item_id = 229

Я нашел хорошие варианты для item_id, но я застрял при вводе формата даты.

Это пример моей текущей формыэто, очевидно, не совсем правильно:

<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

Полагаю, вы не хотите отправлять все значения формы в виде строки запроса.Если это так, вы можете попытаться отменить исходное событие отправки и перенаправить на выбранную страницу со строкой запроса.См. Как перенаправить на другую веб-страницу?

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

Результат:

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