How to parse form's output?

Question

Note: I am unable to edit anything excepting attaching a JS file.

I have a HTML form that looks like this:

<input type="text" name="name" />
<input type="text" name="last_name" />
<input type="text" name="mail" />
<select name="country">
  <option value="1">Country 1</option>
  (...)
</select>

Now imagine user fills the form with:

John | Doe | mail@example.com | selects 57th country

The problem is, my back-end accepts data in a different form (I can't change that). It needs to look more like this in order to work:

   <input type="text" name="site[name]" value="John" />
   <input type="text" name="site[last_name]" value="Doe" />
   <input type="text" name="site[country]" value="57" />
   (...)

Is it possible to parse / modify form's output on the fly so my back end accepts what I feed it with? Any hints? I've been looking everywhere but can't find anything :) Thanks a lot.

Answer 1

You can rewrite all the name attributes with:

$(function() {
    $("input[name]").attr(function(i, oldname) {
        return 'site['+oldname+']';
    });
});

Answer 2

You can use to change the name attribute of each input

$(document).ready(function(){
    $("form input[name=name]").attr("name", "site[name]");
    $("form input[name=last_name]").attr("last_name", "site[last_name]");
    $("form select[name=country]").attr("name", "site[country]");
});

Or general solution

DEMO: http://jsfiddle.net/xbLH7/

$(document).ready(function(){
    $("form").children().each(function(){
        var currName = $(this).attr("name");
        if(currName != ""){
            $(this).attr("name", "site["+currName+"]");
        }
    });
});