2010-08-25 1 views
0

Я динамически создаю формы из объекта JSON, который я получаю с помощью getJSON. Если есть лучший способ создания форм таким образом, пожалуйста, дайте мне знать. Я использовал этот пример, чтобы понять, как перестроить кнопку отправки: Rebind dymanically created forms after jQuery ajax response **Как получить attritubes ввода формы при генерации формы динамически и с использованием .live()

Что мне нужно знать, так это как захватить класс кнопки ввода ввода, которую я нажал. Там есть кнопка «Утвердить» и «Отклонить», и в зависимости от того, какой щелчок будет отправлен на сервер в POST, я знаю, что делать с данными формы, которые POST'ed на стороне сервера.

Вот код:

<script type="text/javascript"> 
$().ready(function(){ 
    jQuery("form[id^='message-']").live('submit', function(){ 

     var id = parseInt(this.id.replace("message-", "")); 

     // this is not the value of the class attribute from submit button clicked.  
     var action = this.attr('class'); 
     alert(action); 

     return false; 

     jQuery.ajax({ 
      type: "POST", 
      url: "/path/to/ajaxhandler.php", 
      data: {"action": action, "id": id}, 
      success: function(response) {     
     }   
    }); 

    /* 
     generate form 
    */ 
    $.fn.getAllUnapprovedMessages = function() { 
     $.getJSON("/messages.php?a=getAllUnapproved, function(data){ 
      var i=0; 
      $("div#messages").empty(); 

      while(i<data.length) { 
       $('div#messages').append(
        '<div id="msg-'+data[i].id+'" style="border: 1px coral solid; margin: 5px 5px 5px 5px;">'+ 
        '<form id="message-'+data[i].id+'" name="form-'+data[i].id+'" action="/path/to/ajaxhandler.php" >'+ 
        'From: '+data[i].u_from+' ----> To: '+data[i].u_to+'<br />'+ 
        'Subject: <br /><input name="subject" type="text" value="'+data[i].subject+'" /> <br /><br />'+ 
        'Message: <br /><textarea rows="10" cols="60">'+data[i].text+'</textarea><br />'+ 
        '<input class="formApprove" type="submit" id="approve-'+data[i].id+'" value="Approve" /> or '+ 
        '<input class="formDeny" type="submit" id="deny-'+data[i].id+'" value="Deny" />'+ 
        '</form></div>'); 
       i++; 
      } 
     }); 
    } 
} 
</script> 

Вот что мне нужно изменить, чтобы быть правильным:

// this is not the value of the class attribute from submit button clicked.  
var action = this.attr('class'); 
alert(action); 

Так что я могу получить атрибут класса с помощью кнопки, которая была нажата.

UPDATE (8.27.2010) - Вот что я сделал для тех, кто спотыкается через это и требует ответа:

Для функции serializeObject(), увидеть этот пост: Convert form data to JavaScript object with jQuery

$(".formApprove").live('click', function() { 
    var fid = this.id.replace(/approve-/i, ""); 
    var formObject = $('form#message-'+fid).serializeObject(); 

    $.post('/path/to/ajaxhandler.php', { 
     a: 'setApproved', 
     id: fid, 
     subject: formObject.subject, 
     message: formObject.message 
    }, function(res) { 
     if(res.result == 0) { 
      alert ('done'); 
     } else { 
      alert ('Error'); 
    },"json"); 
    return false; 
}); 
+0

Трудно понять, что происходит без написания разметки, но я был бы осторожен в привязке событий нажатия к кнопкам отправки - помните, что формы по умолчанию могут быть отправлены, когда пользователь нажимает клавишу Enter. – RussellUresti

+0

@ RussellUresti Хорошая мысль, любые предложения? – kom

+0

Как сделать что-то вроде: $ ('input'). Live ('keypress', function (e) {if (e.keyCode == 13) {return false;}}); – kom

ответ

1

Short ответ есть, вы не можете. Вы не можете получить ссылку на элемент, который вызвал форму для отправки из события отправки формы. Вам также нужно подключить обработчиков к событиям нажатием кнопок. Если вы укажете теги ввода как атрибут имени, их значение будет отправлено на сервер с остальными значениями формы во время нормальной, полной записи, но это мало помогает, когда вы хотите сделать это через Ajax.

Я предлагаю вам изменить код для обработки событий нажатия кнопок и обработчика урожая атрибута class/value, затем запустить событие отправки формы и передать значение атрибута в качестве пользовательских данных события, которые вы можете затем читайте из обработчика представления формы. Если переданные данные имеют значение null/undefined.

+0

спасибо за подсказку – kom