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?

Maybe you should look into the method="get" instead of post. — Medda86
– Medda86, Commented May 31, 2016 at 21:18

score 2 · Accepted Answer · 2016-05-31 21:24:09Z

2

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

edited May 31, 2016 at 21:24

answered May 31, 2016 at 21:18

user2033671

Sign up to request clarification or add additional context in comments.

1 Comment

volume one Over a year ago

The Javascript is better for me than using GET. GET creates an ugly URL which I'm avoiding.

Ali Sheikhpour · Accepted Answer · 2016-05-31 21:24:54Z

1

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

edited May 31, 2016 at 21:24

answered May 31, 2016 at 21:18

Ali Sheikhpour

11.4k5 gold badges53 silver badges100 bronze badges

1 Comment

Ali Sheikhpour Over a year ago

You're welcome. You may accept this answer if this was the best suggested solution.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related