What's the best way to abstract this code?

Question

If you look at the code inside the #top_cat and #high_hat sections below, it's obvious that it does the same thing.

$(document).ready(function ()
{

    $('#top_cat').submit(function ()
    {
        $.post($(this).attr('action'), $(this).serialize(), null, "script");
        return false;
    });

    $("#tip_click").click(function()
    {
        $("#high_hat").submit()(function ()
        {
            $.post($(this).attr('action'), $(this).serialize(), null, "script");
            return false;
        });
        return false;
    });

});

What's the correct syntax to separate the inner code (below) into its own function so that it's callable inside the #top_cat and #high_cat sections without the duplication that exists above?

   $.post($(this).attr('action'), $(this).serialize(), null, "script");
   return false;

Answer 1

function submitHandler() {
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
}

$(document).ready(function () {

    $('#top_cat').submit(submitHandler);

    $("#tip_click").click(function() {
        $("#high_hat").submit(submitHandler);
    });

});

Answer 2

You might want to make a plugin that will do your submission:

;(function($){
    $.fn.extend({
        submitAction: function() {
            this.each(function() {
               $.SubmitAction(this);
            });
            return this;
        }
    });

    $.SubmitAction  = function(ctl) {
        $(ctl).filter('form').submit( function() {
            $.post( $(this).attr('action'), $(this).serialize(), null, 'script' );
            return false;
        });
    };     
})(jquery);

Called as:

$('#top_cat').submitAction();

Answer 3

Your duplication is this part:

element.submit()(function ()
{
     $.post($(this).attr('action'), $(this).serialize(), null, "script");
     return false;
});
return false;

You can do: mysubmitfunc('#high_hat')

Where the function is the duplicated code.

Answer 4

$(document).ready(function(){
    $('#top_cat').submit(on_submit);

    $("#tip_click").click(function(){
        $("#high_hat").submit(on_submit);
        return false;
    });
});

function on_submit()
{
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
}

Answer 5

One cool part about jQuery is that it can select elements using any CSS selector and then attach functionality to the whole set. This includes multiple heterogeneous tags by id, so you could do this.

$("#top_cat,#high_hat").submit(function ()
{
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;
});

Answer 6

I go completely the other way from the answers provided.....

I have this function in the js file:

$("form[rel=ajaxed]").submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), null, "script");
    return false;    
});

and then any form that needs to be submitted by ajax is defined like so:

<form action="someurl.com/file.php" method="post" rel="ajaxed">

notice the rel="ajaxed", and jQuery does the rest of the selector magic...