Google Form を自前のフォームで実装して、Google Formの送信完了ページを表示させず、指定のページに遷移する方法を教えてください。

https://www.imuza.com/entry/2018/05/09/172619
こちらのページを参考に作成しました。
上記URLではページ遷移をさせず、
指定のメッセージを作成するようになっていますが、
私はページ遷移するようにしました。

以下のようなコードを作成したのですが、
ページ遷移させると、なぜかデータ送信されておりません。
ページ遷移のコード(window.location.href）を削除すると、データ送信されます。
送信成功した時に数分かかっているタイムラグがあるのが問題につながっているのではないかと気になっています。

<div id="formWrapper">
<form action="グーグルフォームのリンク"
method="post" name="myForm" target="dummyIframe">

<input type="submit" id="submit_button01" value="xxxx" onclick="sendGform()">
</form>
<iframe name="dummyIframe" style="display:none;"></iframe>
</div>

<script>
function sendGform(){
document.myForm.submit();
document.getElementById('formWrapper').style.display = 'none';
window.location.href = 'http://xxxxxxx';
}
</script>
</body>

行動規範の内容に同意します

回答1件

例えば、HTMLを下記だとして考えます。

html
1<!-- 省略 -->
2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
3<!-- Jquery読み込み -->
4<script type="text/javascript" src="sample.js"></script>
5</head>
6<div id="googleform">
7    <form action="-----ここは書き換える-----">
8        <div><input id="name" type="text" name="entry.1634969710">
9            <label for="name">名前</label>
10        </div>
11        <div>
12            <p>性別</p>
13            <label><input type="radio" name="entry.1598380" value="男"/>男</label>
14            <label><input type="radio" name="entry.1598380" value="女"/>女</label>
15        </div>
16        <div>
17            <p>好きな食べ物</p>
18            <label><input type="checkbox" name="entry.590634" value="ラーメン"/>ラーメン</label>
19            <label><input type="checkbox" name="entry.590634" value="つけ麺"/>つけ麺</label>
20        </div>
21        <button type="submit" name="button" value="送信"></button>
22    </form>
23</div>

Jquery↓

Javascript
1 $("#googleform").submit(function (event) {
2        var name = $("#googleform input[name=name]").val();
3        var gender = $("#googleform input[name=gender]:checked").val();
4        var food = $("#googleform input[name=food]:checked").val();
5 
6        $.ajax({
7            url: "-----ここは書き換える-----",
8            data: {
9                "entry.1460665": name,
10                "entry.541030": gender,
11                "entry.1100401": food
12            },
13            type: "POST",
14            dataType: "xml",
15            statusCode: {
16                0: function () {
17                    //送信に成功したときの処理
18                },
19                200: function () {
20                    //送信に失敗したときの処理
21                    $("form").slideUp();
22                    $('#error').slideDown();
23                }
24            }
25        });
26        event.preventDefault();
27    });
28});