jQuery Mobile メモ - name, value 付きのsubmitボタンの問題
まず先にこの問題はalpha2の時点の話で、alpha3以降では修正されていると思われます(後述)
formの実装では、submitボタンを複数用意して同じ入力に対して別のアクションを取りたい場合があります。
例えば、以下のようなコードです。
<form action="#" method="post" id="form-test"> <input type="text" name="title" /> <button type="submit" name="test" value="true">テスト</button> <button type="submit">決定</button> </form>
これは、「テスト」ボタンの方が押されると
$_POST["test"] = "true"
と値が入ってくるので、この有無でボタンの識別をするようにしています。
ただ、これがjQuery Mobileでは入ってこない…。
コードの処理を追ってみると、通常のボタンのコードを上書きしてJavaScriptのコード上でただsubmit()をしています。
これでは値がPOSTに含まれないのも当然です。
しようがないので、ボタンのタイプをbuttonとして無理矢理処理をコーディングしてみました。
<button type="button" id="submit-test">テスト</button>
<script type="text/javascript"> $(function() { $('#submit-test').click(function(){ $form = $('form#form-test'); $form.append('<input type="hidden" name="test" value="true" />'); $form.submit(); }); }); </script>
実はJavaScriptの知識は狭いので、まずは思った通りに動けばいいと適当です。
正直、これは不具合なのでフォーラムにも合わせて投稿しました。
するとある方から下のような回答が。
jquery.mobile-1.0a2.js の以下の部分を書き直せば汎用になるよという回答でした。
if( type == "submit" ){ $(this).closest('form') .append('<input type="hidden" name="'+$el.attr( "name" )+'" value="'+$el.attr( "value" )+'">') .submit(); }
http://forum.jquery.com/topic/two-or-more-form-submit-buttons-value
結果としては同じですが、汎用なのが素晴らしい!
といっても、これだとライブラリのコードを直接書き換えることになるのが難点です。
バージョンアップしたときに再度、このコードを差し込まないといけません。
それもあって正規のコードにこれが反映されないかな〜と思っていると、昨日こんなコミットがありました。
> make sure submit button name/value is submitted with form values. Fixes #551
https://github.com/jquery/jquery-mobile/blob/419787affec72d7cfcca69999b48e4b58e02d079/js/jquery.mobile.forms.button.js
紛れもなくこの問題の修正です。
試しにこのコードをalpha2に適用してみると、なんも問題なく動作しました。
そういうわけで、次のバージョンアップではこの問題は解決しているものと思われます。
…というかこの修正、元々 type=="submit" だったら $el.submit();、そうでなかったら el.click(); するというコードが、ただの $el.click(); になっただけです。
元々が余計なことをしてただけってこと？
