1フォーム複数submitの実装

本日学んだこと。JavaScriptでフォームのaction要素を変えると、submitした後もそのままなんですね。

<form id="frm_search" action="search" method="post">
    ...
    <input type="submit" id="btn_search" name="btn_search" value="検索"/>
    <input type="button" id="btn_download" name="btn_download" value="CSVダウンロード"/>
</form>

ひとつのフォームで複数のsubmitがあるこんなhtml。で、CSV ダウンロードのonclickイベントでactionを変えてsubmitするようにしたんですが、一度ダウンロードした後に検索したら再びダウンロードになってしまいました*1。

というわけで、以下のように対応してみました。jQueryつかってます。

<form id="frm_search" action="" method="post">
    ...
    <input type="button" id="btn_search" name="btn_search" value="検索" />
    <input type="button" id="btn_download" name="btn_download" value="CSVダウンロード" />
</form>

$(function(){
    $("#btn_search").click(function(){
        $("#frm_search").attr('action', 'search');
        $("#frm_search").submit();
    });

    $("#btn_download").click(function(){
        $("#frm_search").attr('action', 'download');
        $("#frm_search").submit();
    });
});