Как получить атрибуты ввода формы при динамическом создании формы и использовании .live () - PullRequest
0 голосов
/ 26 августа 2010

Я динамически создаю формы из объекта JSON, который я получаю с помощью getJSON. Если есть лучший способ построения форм таким образом, пожалуйста, дайте мне знать. Я использовал этот пример, чтобы понять, как перепривязать кнопку отправки: Перепривязать созданные dymanical формы после ответа jQuery ajax **

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

Вот код:

<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);

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

ОБНОВЛЕНИЕ (8.27.2010) - Вот что я сделал для всех, кто наткнулся на это и нуждается в ответе:

Для функции serializeObject () см. Этот пост: Преобразование данных формы в объект JavaScript с помощью 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;
});

1 Ответ

1 голос
/ 26 августа 2010

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

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

...