javascript - 表单字段选项按日期和项目编号更改 URL

Question

我正在创建一个包含 2 个字段的表单 - 一个日历和 2 个产品项目的选项。然后，该 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

我假设您不想将所有表单值作为查询字符串发送。如果是这种情况，您可以尝试取消原始提交事件并使用查询字符串重定向到所选页面。请参阅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>

结果:

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