Websegment.net

最近ホントにWeb業界ではJavaScriptが流行っていて、JavaScriptでデータのやりとりも当然の様に行われています。またまたWebデザインもについてキレイなページを世に出さないと見向きもしてもらえない。なんてことが多くなってきた様に思える今日この頃。です。

で、サーバサイドが出来る人はデザインに関してはやはり専門でないので、劣る部分が多いかと思います。（サーバサイドな方々に語弊があったらゴメンナサイ）

私の数年前の固定概念だったのですが「フォームを使ったPOST送信にはinputタグや、buttonタグじゃないと送信できない。」まぁ当然ながら今はそうでもないです。

JavaScriptを使えばaタグからでもinputタグのtypeがbuttonであってもPOST送信できます。なんなら、aタグやbuttonタグを使った方がデザインとかしやすいのです。少なくともinputタグよりかはbuttonタグの方がデザインはしやすいはず！

それは分かっているけどJavaScript組むのが面倒とか思う人も居るかもしれませんが、結構簡単です。と言う事でちょいとJavaScriptの関数を書いてみました。小さい関数ながらも、便利に使える様にしてみました。（使いにくかったらご連絡下さい。）

boolean doPost(object form, string action, string name);

• 第一引数：html側のフォームオブジェクトを指定
• 第二引数：実際にデータを送信する先（action）
• 第三引数：どのボタンを押されたか判定用　識別子（Optional）

具体的な使い方は以下のとおり。

jsファイル

function doPost(form, action, name){
    name = name || "send";//defualt setting.
    var submitType = document.createElement("input");
    submitType.setAttribute("name", name);
    submitType.setAttribute("type", "hidden");
    submitType.setAttribute("value", "1");//判定用の値
    form.appendChild(submitType);
    form.action = action;
    form.method = "post";
    form.submit();
    return false;
}

第三引数については、オプションとして、どのボタンを押されたかの判定を行う用に識別子を付ける事ができます。同じaction先だけど押されたボタンが何なのかを判定する時に利用できればと思い、引数を付けてます。特に指定が無い等フレームワークを使っているから不要という場合は特に第三引数を付ける必要はありません。

判定用の値は何でも構いません。

htmlファイル（aタグの場合）

<form name="form1" action="/example/form" method="post">
<input type="hidden" name="token" value="fch357jvw6jv7557jvfz" />
<a href="/users/form/input.php" name="send" id="send" onclick="return doPost(document.form1, this.href, thie.name)">送信</a>
</form>

htmlファイル（buttonタグの場合）

<form name="form1" action="/example/form" method="post">
<input type="hidden" name="token" value="fch357jvw6jv7557jvfz" />
<button type="button" name="send" value="/example/form/input.php" id="send" onclick="return doPost(document.form1, this.value, this.name)">送信</button>
</form>

単にaタグの部分がbuttonに変わったのとhref値がvalue値に変わっただけで、後は一緒です。

すごく小さい関数ですが、以外に結構使えるかも。今回は純正のJavaScriptで書きましたが、jQueryで書いた場合はもっと色々なことができると思います。