javascript - 如何将表单值提交到由 FORM 输入值组成的 URL？

Question

我有一个表单，其中包含我需要提交回页面的各种元素。但是，其中一个选择元素显示产品型号，我希望该元素成为表单提交到的 URL 的一部分。

<form action="" onSubmit="window.location.href=this.ProductModel.options[this.ProductModel.selectedIndex].value; return false;" enctype="multipart/form-data" method="post">

<select name="Country" id="Country">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="India">India</option>
</select>

<select name="ProductModel" id="ProductModel">
<option value="/gaming/ps4">Playstation 4</option>
<option value="/gaming/xboxone">Xbox One</option>
<option value="/gaming/3ds">Nintendo 3DS</option>
</select>

</form>

因此，如果用户选择 Playstation 4例如，我希望提交表单并转到 url http://myrootpage.com/gaming/ps4 。

我可以让它转到 URL http://myrootpage.com/gaming/ps4使用 onSubmit 形式的 javascript 代码属性，但因为我必须 return false为了使其正常工作，没有任何表单字段值能够通过。

如何解决这个问题？

Answer 1

您可以根据所选操作更改表单的操作，然后发布到该端点。

<form id="myForm" action="" enctype="multipart/form-data" method="post">

    <select name="Country" id="Country">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="India">India</option>
    </select>

    <select name="ProductModel" id="ProductModel">
    <option value="/gaming/ps4">Playstation 4</option>
    <option value="/gaming/xboxone">Xbox One</option>
    <option value="/gaming/3ds">Nintendo 3DS</option>
    </select>

</form>

<script type="text/javascript">
    document.getElementById('myForm').addEventListener('submit', function() {
        this.action = this.ProductModel.options[this.ProductModel.selectedIndex].value
        return true;
    });
</script>

或者，您可以进行 Action 游戏并使用 GET 方法提供表单字段作为 url 参数。

<form action="gaming" enctype="multipart/form-data" method="get">

    <select name="Country" id="Country">
    <option value="USA">USA</option>
    <option value="UK">UK</option>
    <option value="India">India</option>
    </select>

    <select name="ProductModel" id="ProductModel">
    <option value="ps4">Playstation 4</option>
    <option value="xboxone">Xbox One</option>
    <option value="3ds">Nintendo 3DS</option>
    </select>

</form>

这将使网址看起来像这样:

http://myrootpage.com/gaming?ProductModel=ps4&Country=USA