なにがしたい？
<form>
<input type="submit" id="submit" />
</form>
<script>
$(function() {
$("body").click(function() {
$("form").submit(); // 効かない
});
});
</script>
jQueryでは、submit を id や name に含むフォームは submit() できない！らしいです。
なので、submit を id や name に使うのはやめましょう。
解決！
結論
いやいやいや、そんなはずはない。
そうだ。
id や name が submit っていうボタンがあるってことなんだから、クリックしたら良いんじゃない？
$('form #submit').click();
あ、できた。
＃もう少し一般的に適用するならこのような感じ。
「name=submitがあるなら、それをクリックすればいいじゃない」
var $form = $(e.target).closest('form');
if ($form.find('*[name="submit"]').length > 0) {
$form.find('*[name="submit"]').click()
} else {
$form.submit();
}
jQueryプラグインにできるともっとカッコいいですね。
解説
jQueryが登場して久しく、もう既に時代遅れだと言われてからも久しいくらいの時が流れていますが、この「submitがあるフォームはsubmit()できない」という問題はわりと通説らしく、Google先生に聞くと、1ページ目のすべての記事から「そんなの使うな」と言われてしまい、心が折れます。
form.html
<!-- Form -->
<form action="submit.php" method="post">
<input type="hidden" name="sample" value="value" />
<input type="button" id="pseudo_submit" value="pseudo" />
<input type="submit" id="submit" /> <!-- これが邪魔 -->
</form>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Javascript to submit -->
<script>
$(function() {
$("#pseudo_submit").click(function() {
$("form").submit(); // 効かない
});
});
</script>
form.html
<form action="submit.php" method="post">
<input type="hidden" name="sample" value="value" />
<input type="button" id="pseudo_submit" value="pseudo" />
<input type="submit" id="submit1" name="submit" value="submit1" />
<input type="submit" id="submit2" name="submit" value="submit2" />
<input type="submit" id="submit3" name="submit" value="submit3" />
</form>
いやいや、使うな！って言われても、使いたいときもあります。たとえばどのボタンが押されたかによって実行条件を変えたい場合、submitという変数にそのボタン名をいれてフォーム送信するとわかりやすい、とか。
もちろん「submitname」とか変数名を変えれば良いんですが、「submit」っていう名前のほうが断然わかりやすいじゃないですか！使わせてくださいよ。
というわけで試行錯誤してみたら、できた、というお話です。
Google先生。どうかこの記事を検索上位に滑り込ませていただき、同じように困っている人をお救いくださいませ……。
完成したform.html
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Javascript to submit -->
<script>
$(function() {
$("#pseudo_submit").click(function() {
$("form #submit3").click();
});
});
</script>
<!-- Form -->
<form action="submit.php" method="post">
<input type="hidden" name="sample" value="value" />
<input type="button" id="pseudo_submit" value="pseudo" />
<input type="submit" id="submit1" name="submit" value="submit1" />
<input type="submit" id="submit2" name="submit" value="submit2" />
<input type="submit" id="submit3" name="submit" value="submit3" />
</form>
免責
- ボタンをクリックしているので、クリックできないエレメントだと動かないかもしれません。
- ていうか他にも回避法はあると思います。たしかあった。
- この記事はそういう細かな技術的カンペキさを追求する記事ではなく、Google先生が言っていることがいつも正しいとは限らないよ、案外あっさりカンタンな方法でより良い解決策が見つかることはあるよ！と言うのが目的の記事です。マサカリご容赦ください。