Question

当我从不同的按钮提交表单时，我想做一个不同的功能。我的表格如下。

<form action="status_submit" method="get" accept-charset="utf-8">
    <button type="submit" name="approve">Approve</button>
    <button type="submit" name="reject">Reject</button>
    <button type="submit" name="cancel">Cancel</button>
</form>

我尝试了以下代码。但是没有用。

<script type="text/javascript">
    $(document).ready(function() {
        $('form').submit(function(event) {
            var val = $("button[type=submit][clicked=true]").attr('name');

            alert(val);

            if (val == 'approve') {
                alert('approve');
            } else if (val == 'reject') {
                alert('reject');
            } else if (val == 'cancel') {
                alert('cancel');
            }

            return false;
        });        
    });
</script>

始终为未定义的val。我该怎么做？

Answer 1

你不能那样跟踪......解决方案可能是使用按钮的点击处理程序

转储解决方案可以

$(document).ready(function() {

    $('button[name="approve"]').click(function(){
        //do stuff
        $(this).addClass('clicked');
    })
    $('button[name="reject"]').click(function(){
        //do stuff
        $(this).addClass('clicked');
    })
    $('button[name="cancel"]').click(function(){
        //do stuff
        $(this).addClass('clicked');
    })

    $('form').submit(function(event) {
        var val = $("button.clicked[type=submit]").attr('name').removeClass('clicked');

        alert(val);

        if (val == 'approve') {
            alert('approve');
        } else if (val == 'reject') {
            alert('reject');
        } else if (val == 'cancel') {
            alert('cancel');
        }

        return false;
    });        
});

Answer 2

使用$(this)引用点击的按钮。

<script type="text/javascript">
$(document).ready(function() {
    $('form button[type="submit"]').click(function(event) {
        var val = $(this).attr('name');

        alert(val);

        if (val == 'approve') {
            alert('approve');
        } else if (val == 'reject') {
            alert('reject');
        } else if (val == 'cancel') {
            alert('cancel');
        }

        // Submit form
        $('form').submit();

        return false;
    });        
});
</script>

从jQuery中识别表单中的提交按钮

2 个答案: