How to submit form values to a URL made from FORM input values?

Question

I have a form which has various elements that I need to submit back to the page. However, one of the select elements shows product models and I want that element to become part of the URL that the form submits to.

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

So if a user was to select the Playstation 4 for example, I want the form to submit and go to the url http://myrootpage.com/gaming/ps4 .

I can get it to go to the URL http://myrootpage.com/gaming/ps4 using the javascript code in the form onSubmit attribute but because I have to return false for it to work, none of the form field values are making it through.

How could this be solved?

Answer 1

You can change the action of the form based on the selected action and then post to that endpoint.

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

Alternatively you can make the action gaming and use the GET method to provide the form fields as url parameters.

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

This would make the urls look like this:

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

Answer 2

I suggest this jquery to change the action of form on select-change and let user submit the form in normal way:

$(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();
   })
})