Question

Actually there would be two questions,

The scenario is

The form contains three submit buttons, when i’m clicking one of those button the submit event is get triggered, then the first event is click but i’m not capturing this. The second event is form’s submit which is the one i’m capturing.

The code is

$('#search-main a').on('click', function(e){
    e.preventDefault();
    $('#search-advanced').remove();
    var target = $(this).attr('href');
    var res = $.get(target, function(data){
        $('body').append($(data).find('#search-advanced'));
        $('#search-advanced').addClass('row reveal-modal');
        $('#search-advanced')
        .css('top', 80)
        .css('border-radius' , '5px')
        .css('padding-left' , '0px')
        .css('padding-right' , '0px');

        $('#search-advanced').on('submit', 'form' ,function(e){
            var params = $('#search-advanced form').serialize();

            console.log(e);
            console.log(params);
            $.get(target, params, function(data){
                $('#search-advanced form').html($(data).find('#search-advanced form').html());
                $('#search-advanced input[name="select_filter"]').remove();
            });
            return false;
        });

        $('#search-advanced input[name="select_filter"]').remove();
        $('#search-advanced').on('change', '#categoryDropdown', function(){
            $('#search-advanced form').trigger('submit');
        });

        $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>');
        $('#search-advanced').reveal({
            animation: 'fade', 
            closeOnBackgroundClick: false
        });
    });
});

Since the JQuery documentation says

Only “successful controls” are serialized to the string. No submit
button value is serialized since the form was not submitted using a
button

I was unable to get the button values using serialize()

Question one is

How to get the button attributes which initiated the submit?

I approached in a different way as workaround of this, which was

• First capturing the click event
• Get the attributes
• Pass the attributes as event extra parameters

The modified code is

$('#search-advanced').on('submit', 'form' ,function(e){
    var params = $('#search-advanced form').serialize();

    console.log(e.data);
    console.log(params);
    $.get(target, params, function(data){
        $('#search-advanced form').html($(data).find('#search-advanced form').html());
        $('#search-advanced input[name="select_filter"]').remove();

        if(typeof $('input[name="one_more"]') !== 'undefined'){
            var oldOneButton = $('input[name="one_more"]');
            var newOneButton = oldOneButton.clone();
            newOneButton.attr('type', 'button');
            newOneButton.insertBefore(oldOneButton);
            oldOneButton.remove();
        }

        if(typeof $('input[name="remove_filter"]').attr('name') !== 'undefined'){
            var oldRemoveButton = $('input[name="remove_filter"]');
            var newRemoveButton = oldRemoveButton.clone();
            newRemoveButton.attr('type', 'button');
            newRemoveButton.insertBefore(oldRemoveButton);
            oldRemoveButton.remove();
        }
    });
    return false;
});

$('#search-advanced input[name="select_filter"]').remove();
$('#search-advanced').on('change', '#categoryDropdown', function(){
    $('#search-advanced form').trigger('submit');
});

$('#search-advanced').on('click', 'input[name="one_more"]', function(){
    console.log($(this).attr('name'));
    var name = $(this).attr('name');
    var value = $(this).attr('value');
    $('#search-advanced form').trigger('submit', {name:value});
});

I changed the type attribute because it triggered the submit two times.

The problem is the console.log(e.data); prints undefined instead of the passed object.

Second question is

Why the e.data is undefined?

Any suggestions would be greatly appreciated.

Answer 1

To capture the button, fiddle

    $("#frm").on("click","button",function(){
       alert(this.id);

    }).on("submit",function(e){
        console.log("submit");
        return false;
    });​