Question

我有一个表单，其中包含我需要提交回页面的各种元素。但是，其中一个select元素显示了产品模型，我希望该元素成为表单提交的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，我希望表单提交并转到网址http://myrootpage.com/gaming/ps4。

我可以使用http://myrootpage.com/gaming/ps4属性中的javascript代码转到网址onSubmit，但因为我必须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>

或者，您可以进行动作游戏并使用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

Answer 2

我建议这个jquery在select-change上改变表单的动作，让用户以正常的方式提交表单：

$(document).ready(function(){
   $("#Country").on('change', function(){
    var taregetURL=$(this).val();
    $("#YourformId").attr("action", targetURL);
    // And if you want to submit the form immediately:
    // $("#YourformId").submit();
   })
})

如何将表单值提交到由FORM输入值创建的URL？

2 个答案: