Отправка данных формы AJAX`ом?

[Jopses]

Здравствуйте уважаемые!
Есть функция формирующая таблицу с информацией (впоследствии появляется в диалоговом окне). Моя задача состояла в том, что бы в конце каждой <tr> с информацией, прикрутить SELECT + два скрытых <input> + кнопку для отправки формы. Так как SELECT и Кнопка формируются в ячейках, связал их с Формой при помощи form='data'. Для каждой <tr> Форма создаётся своя, но с одинаковым ID (предполагается, что за один раз можно изменить только одно значение в таблице). В срытых <input> формируются уникальные значение. <tr> может быть бесконечно много. Кинул click на Кнопку и создал функцию, которая обращается к серверному скрипту, для изменения значений в БД. Вот тут и начались проблемы, точнее одна. Data undefined так сказать)
По всей видимости функция не получает данные из формы (у меня проблемы с подобными связываниями).
Может, кто подскажет, намекнёт куда копать.
Буду премного благодарен!

function vr_cam_gr_draw_all(id) {
    if(($("#vr_grcam_"+id).length > 0)) {
        var tdiv    = $("#vr_grcam_"+id);
        var ttable  = $('#vr_grcam_t'+id);
    } else {
        var tdiv = $('<div/>',{id: "vr_grcam_"+id, 
            title: "Список прав групп и пользователей (ID: "+id+")", "class": "list"
        });
        var ttable = $('<table/>',{id: "vr_grcam_t_"+id, "class": "list", style: "border-bottom: 0px;"
        });
        $(ttable)
        .append($('<thead/>').append($('<tr/>')
            .append($('<th/>',{text: 'ID Группы', width: 120}))
            .append($('<th/>',{text: 'Имя группы', width: 250}))
            .append($('<th/>',{text: 'Статус права', width: 110}))
            .append($('<th/>',{text: '', width: 120}))
            .append($('<th/>',{text: '', width: 60}))
            ))
        ;
        $(tdiv).append(ttable);
    

        for(var ruleline in group[id]) {
            $(ttable).append($('<tr/>')
                .append($('<td/>',{text: group[id][ruleline].group_id}))
                .append($('<td/>',{text: group[id][ruleline].group_name}))
                .append($('<td/>',{html: lang.rules.allowed[group[id][ruleline].rule_status]}))
								
/********************************************************/								
								//Здесь начинается формироваться форма для отправки на сервер при нажатии кнопки ИЗМЕНИТЬ
                .append($("<form id='data'/>"))//Элементы формы не состоят в ней и связанны с ней по id='data'
                .append($('<td/>',{html: "<select name='rule_status' form='data'><option value=''>Выбрать статус</option><option value='0'>Запрещено</option><option value='1'>Разрешено</option><option value='2'>Только онлайн</option></select>", style:"padding: 5px"}))
                .append("<input type='hidden' form='data' name='group_id' value="+group[id][ruleline].group_id+">")
                .append("<input type='hidden' form='data' name='cam_gr_id' value="+id+">")
                .append($('<td/>')
                .append($('<button/>',{button: {}, "form": "data","type": "button" , text: 'Изменить', style:"font-size: 12px; padding: 3px;"}).click(function() {edit_rules(this);
								//Конец формы
/********************************************************/									
                }))));}}
$(tdiv).dialog({
    width: '650',
    height: '300', 
    resize: false
});
}

function edit_rules(obj) {
    var usr_url = cam_control+"/cgi-bin/admin.pl?m=editrules";
    $.ajax({
        type: 'GET',
        dataType: 'json',
        data: $(obj).serialize(),
        cache: false,
        url: usr_url,
        success: function(data){
            if(data.error != undefined) { //На этом месте происходит ошибка!
                if(undefined != err_lang[data.error]) {
                    alert('Ошибка: '+err_lang[data.error]);
                }else{
                    alert('Возникла неизвестная ошибка, попробуйте позже. ('+data.error+')');
                }} 
        },
        error:function (xhr, ajaxOptions, thrownError, request, error){
            alert('Возникла неизвестная ошибка, попробуйте позже. \n [ \n'+'xrs.cam_status = ' + xhr.status + '\n' + 'thrown error = ' + thrownError + '\n' + 'xhr.statusText = '  + xhr.statusText + '\n' +
                'request = ' + request + '\n' + 'error = ' + error+' \n ]');
        }
    });
}

[Naive]

Для каждой <tr> Форма создаётся своя, но с одинаковым ID

id на странице может быть только один уникальный.
Лучше в данном случае вообще не пользоваться формой, а для каждой строки создавать свой объект, который при нажатии на кнопку и будет отправлять данные. Если конечно отправка идет не через пра-дедовский AJAX с помощью айфрейма.

[Jopses]

Не объясните немного по конкретнее по поводу создания объекта для каждой строки (по одному клику нужно просто отправлять три значения сразу, что бы серверный скрипт принял и в базу корректно занёс). AJAX не по средствам айфрейма отправляется)

[Naive]

Ну если упороться, то можно что-то в этом роде:

(function(window, jQuery, undefined){
  function SendObj(){
    return this.init.apply(this, arguments);
  };
  //  SendObj.prototype = [];
  SendObj.prototype.constructor = PageList;

  SendObj.prototype.initVal = function( $obj ){
    function setVal() {
      this.data[$obj.attr('name')] = $obj.val();
    };
    setVal();
    if ($obj.attr('type') === 'submit') {
      $obj.click(
        $.proxy(this.send, this);
      );
    } else {
      $obj.change( 
        $.proxy(setVal, this); 
      );
    };
    return this;
  };
  SendObj.prototype.init = function( $tr ){
    var self = this;
    this.data = {};
    $tr.find('input, select').each(function(){
      self.initVal( $(this) );
    });
  };
  SendObj.prototype.send = function(){
    $.get('/send.cgi', this.data,
      $.proxy(function(responce){
        console.log(responce);
      }, this),
    'text')
  };

  $('tr').each(function(){
    new SendObj($(this));
  });

})(window, jQuery);

Если писать в стиле костыль-ниндзя, то можно обойтись и таким немасштабируемым решением:

$('tr').each(function(){
  var $self = $(this), data={};
  $self.find('input[type=submit]').click(function(){
    $self.find('input[type!=submit], select').each(function(){
      data[$(this).attr('name')] = $(this).val();
    });
    $.get('/send.cgi', data,
      function(responce){
        console.log(responce);
      },
    'text');
  });
});

не проверял, но вдруг сработает

UPD: пропустил прототипирование от массива, тут оно не нужно, осталось от старого кода (5 строка, закомментил)

[Jopses]

Спасибо за разъяснения. Будем работать дальше!