jQueryで複数のform選択してそこにsubmitを付与する

今はこのようにformをHTMLで作っている。（Djangoのテンプレートなので変なのも含まれてるのはご勘弁）

<form name="ban_fm" action="{% url 'ajax_ban' %}" method="post">
    {% csrf_token %}
    <input type="hidden" name="user_profile_id" value="{{ item.id }}" />
    <button class="btn btn-sm btn-danger btn" type="submit">
    無視{% able_ban user item.user %}</button>
</form>

そして、僕はセレクタ？はこのように書いた。

    // nameバージョン(home.html用)
    $("form[name=ban_fm]").submit(function() {
        var $form = $(this);
        // 必ずreturn
        return ban_ajax($form);
    });

$("form[name=ban_fm]").submit()のようにしたら、 formというタグで、nameがban_fmのもので出来る。 しかも、getElementsByNameは配列？とかで返ってきて1つのオブジェクトだから hoge[0]とかで1つだけ指定してたと思うが、 特にしなくてそのまま.submit()メソッドチェーンでつなげてもOKだった。

その後の処理は以下のものだが、先ほどの処理でvar $form = $(this);のようにし、 ban_ajax($form);として引数に渡すと、 self変数に格納されてくれた。 これをなぜか、`ban_ajax(this);にするとうまくいきそうになかった。

    // 無視(ボタンクリックでAjax)
    // 共通で使うため独立にした
    var ban_ajax = function(self) {
        console.log(self.attr('action')),
        $.ajax({
            'url':self.attr('action'),
            'type':'POST',
            'data':self.serialize(),
            'dataType':'json',
             // 通信が成功したら動く処理で、引数には返ってきたレスポンスが入る
            'success':function(response) {
                // レスポンスからデータを取り出し
                console.log("result: " + String(response.result));
                if (response.result == 0) {
                    // 無視できたとき
                    // ボタンの文字を変える
                    self.children('button').text("無視解除");
                } else if (response.result == 1) {
                    // 無視から外したとき
                    // ボタンの文字を変える
                    self.children('button').text("無視登録");
                }
                alert(response.message);
            },
        });
        return false;
    };