とあるシステムにて問題が発生しました。

それがタイトルにもある通り、IEだけフォームが二重送信されているのです。

問題が起きたのはECサイトだったのですが、カートに２つ商品が追加されていました。

最初はバックエンド側（PHP）に問題があるのかと見ていたのですが、ネットワークを見ると２つ送られている事が発覚しました。

同じ問題が発生した場合に、解決出来る様に原因と解決方法を記載しておきます。

原因

問題が発生したフォームは次の様なものでした。

HTML

<form>
    <button type="button" onclick="addCart();">カートに追加</a>
</form>

JavaScript

<script>
    function addCart() {
        $('form').submit();
    }
</script>

「カートに追加」ボタンを押下されると、そのままフォームを送るのではなく、JavaScriptで送るといった事をしていました。

※上記のコードだけでは、JavaScriptでフォーム送信する必要がないかと思われますが、実際のシステムではもう少し複雑な事をしています。分かりやすい様に不要な部分を省いています。

何故、二重送信されたかと言うと、HTMLのフォーム送信　と　JavaScriptのフォーム送信の両方が送信されている為でした。

ChromeやFirefoxなどでは<button>タグでフォームの送信がされないのですが、IEでは<button>タグでもフォームが送信されてしまいます。

これが原因でした。

解決方法

次の様に変更する事で解決しました。

HTML

addCartの前に「return」を追加

<form>
    <button type="button" onclick="return addCart();">カートに追加</a>
</form>

JavaScript

フォーム送信の後に「return false」を追加

<script>
    function addCart() {
        $('form').submit();
        return false;
    }
</script>

JavaScriptでフォーム送信をしたあとは、HTMLでのフォーム送信をキャンセルしています。

これでフォームの二重送信が解決しました。

バックエンドを見てしまいがちなので、ハマってしまうと時間が掛かると思います。

今回は問題が発生したのがIEと事前にクライアントから情報を頂けたので、比較的スムーズに解決しました。

知っているか知らないかでハマり度合いが違うと思うので、片隅にでも入れておきましょう！