JavaScript: Redirect form submit to get action

From The Travis van der Font Wiki
Jump to: navigation, search
HTML Code Example
<form action="http://www.beckimmo.lu?property-type=test" method="POST" class="custom" id="search-form" accept-charset="utf-8">

   First name: <input type="text" name="fname" id="fname"/><br/>
   Last name: <input type="text" name="lname" id="lname"/><br/>
   
   <label for="number_count" id="label_number_count">Number Count:</label>
   <select id="number_count" name="number_count">
      <option value="1">1</option>
      <option value="2" selected="selected">2</option>
   </select>
   <br/>
   
   <input type="hidden" id="search_nonce" name="search_nonce" value="6c157deab0"/>
   <input type="hidden" name="_wp_http_referer" value="/?property-type=new"/>
   <input type="hidden" name="page_id" value="846"/>
   <input type="submit" name="" value="Search" class="button"/>
   
</form>
JavaScript Code Example
var TempJS = {
    parse_query_string: function (query)
    {
        var vars         = query.split("&");
        var query_string = {};

        for (var i = 0; i < vars.length; i++)
        {
            var pair = vars[i].split("=");

            // first entry with this name
            if (typeof query_string[pair[0]] === 'undefined')
            {
                query_string[pair[0]] = decodeURIComponent(pair[1]);

            } // second entry with this name
            else if (typeof query_string[pair[0]] === 'string')
            {
                var arr               = [query_string[pair[0]], decodeURIComponent(pair[1])];
                query_string[pair[0]] = arr;

            } // third or later entry with this name
            else
            {
                query_string[pair[0]].push(decodeURIComponent(pair[1]));
            }
        }

        return query_string;
    }
};

$('#search-form').submit(function (e)
{
    e.preventDefault(); // stop form submission action

    // get all form field and turn elements + values into an array
    var post_data   = $(this).serializeArray();
    var post_length = post_data.length;
    var new_data    = [];
    var out         = [];

    // loop through form array to allocate new post array
    for (var i = 0; i < post_length; i++)
    {
        // exclude inputs: _wp_http_referer, search_nonce
        if (post_data[i].name !== '_wp_http_referer' && post_data[i].name !== 'search_nonce')
        {
            new_data[post_data[i].name] = post_data[i].value;
        }
    }

    // geting the url property-type and assigning it to property_type
    var query_string              = window.location.search.substring(1);
    var query_object              = TempJS.parse_query_string(query_string);
        new_data['property_type'] = query_object['property-type'];

    // loop through post array (new_data) creating a new query formatting array
    for (var key in new_data)
    {
        out.push(key+'='+encodeURIComponent(new_data[key]));
    }

    // formatting url query array to string
    var final = out.join('&').replace(',', '&');

    post_data = null; // clear post data array
    new_data  = null; // clear post array
    out       = null; // clear out array

    // page redirect
    self.location['href'] = '/?'+final;
});