Re-order form fields on submit url

Posted by user2521764 on Stack Overflow See other posts from Stack Overflow or by user2521764
Published on 2013-06-25T21:55:51Z Indexed on 2013/06/25 22:21 UTC
Read the original article Hit count: 167

Filed under:
|
|

I have a get form with several visible and hidden input fields. When the form is submitted, selected fileds with their values are appended to the url in the order they are placed in the form. Is there a way to re-order the parameters in the url using jQuery? Note that for the reasons of usability, I can not re-order the elements on the form itself.

I know it beggs the question "why would I want to do it?", but the reason is that I will be hitting a static page, so the order of the parameters have to be exactly how they are in the static page url. For example, my form returns a url:

http://someurl??names=comm&search=all&type=list

while the static page has a url:

http://someurl??search=all&type=list&names=comm

A simplified form example is here:

<form  id="search_form" method="get" action="http://www.cbif.gc.ca/pls/pp/ppack.jump" >

<h2>Choose which names you want to be displayed</h2>
<select name="names">
    <option value="comm">Common names</option>
    <option value="sci">Scientific names</option>
</select>

<h2>Choose how you want to view the results</h2>

<input type="radio" name="search" value="all" id="complete" checked = "checked" />
<label for="complete" id="completeLabel">Complete list</label>
<br/>

<input type="radio" name="p_null" value="house" id="house" />
<label for="house" id="houseLabel">House plants only</label>
<br/>

<input type="radio" name="p_null" value="illust" id="illustrat" />
<label for="illustrat" id="illustratLabel">Plants with Illustrations</label>
<br/>


<input type="hidden" name="type" value="list" />

<input type="submit" value="Submit" />
</form> 

I can get form fields with values using $(#search_form).serializeArray() and massage the array like I want to, but I don't know how to set it back, i.e. modify the serialized values so that the submitted url has my order of parameters. I'm not even sure if this is the right way to go about it, so any pointers would be greatly appreciated.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery