Question

我正在使用getJSON从JSON对象动态创建表单。如果有更好的方式以这种方式建立表格，请告诉我。我用这个例子来了解如何重新绑定提交按钮： Rebind dymanically created forms after jQuery ajax response **

我需要知道的是如何获取我点击的输入提交按钮的类。有一个“批准”和“拒绝”按钮，取决于点击哪一个将在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);

所以我可以从点击的按钮中获取class属性。

更新（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;
});

Answer 1

简短的回答是，你不能。您无法单独从表单的提交事件中获取导致表单提交的元素的引用。您还需要将处理程序连接到按钮的单击事件。如果您为输入标记赋予name属性，则在正常的完整帖子中，它们的值将以其余的表单值发送到服务器，但是当您想通过Ajax执行此操作时，这没有多大帮助。

我建议您修改代码以处理按钮的单击事件，并在该处理程序中收集类/值属性，然后触发表单的提交事件并将属性值作为自定义事件数据传递，然后您可以从表单提交处理程序中读取。如果传递的数据为null / undefined。

如何动态生成表单并使用.live（）获取表单输入的属性

1 个答案: