.submit()がうまく動作しない

Question

発生している問題・エラーメッセージ

自分が頻繁にアクセスするサイトが自動ログインに対応していないため、手間を減らすためにログイン画面で自動でログインボタンを押すブックマークレットを作ろうと思いました。.submit()を使用すれば問題ないと思い作ってみたのですがうまく動作しませんでした。

色々調べてみてこのサイトのように.click()を使うことで一応解決はしたのですが.submit()が聞かない根本的な原因がわからず質問させてもらいました。

以下がそのコードです。htmlは一部のみです。
(idやnameにsubmitと設定されているものはありませんでした。またjsは下にあるonClickを除けば使用されていませんでした。)

<div class="column one">
    <form action="(URL)" method="post">

        <!-- ユーザーID入力フォームなど色々 -->

        <div class="form-element-wrapper">
            <button class="form-element form-button" type="submit" name="_eventId_proceed"
                onClick="this.childNodes[0].nodeValue='ログインしています…'">Login</button>
        </div>
    </form>
</div>

動かなかったもの

document.querySelector(".column.one>form").submit()

動いたもの(.click使用)

    document.querySelector(".column.one>form>.form-element-wrapper>.form-element.form-button").click()

試したこと

コンソール画面にdocument.querySelector(".column.one>form").submitとfirefoxで打つとfunction submit()と表示されそれに関する情報がツリーとなり表示されているので間違っていないように見えます。しかしdocument.querySelector(".column.one>form").submit()と打つとページがリロードされ、それと同時にコンソール画面にundefinedと表示されます。

補足情報

idやパスワードはブラウザのオートフィル機能により自動入力されています。

Comments

[miyabi_pudding]

> うまく動作しませんでした。

何がどうなることが、"うまく動作"となるのか提示されていないので、
回答しようがありません。
何がどうなることが、狙っている挙動でしょうか？
また、formのactionのURLは、同ページが指定されていますか？
それとも別ページが指定されていますか？

[yen]

すみません、ログインボタンが押された状態と同じ状態にしたいということです。(onclickの内容は実行されなくてもいいです)言葉足らずですみません。
formのactionは同ページが指定されています。

[miyabi_pudding]

なるほど、ログインをさせたい、ということですか。
それだと、actionに同ページを指定してでは、そらリロードされて終了です。
ログイン処理はサーバーへの通信やAPIの実行などは行いますか？

[yen]

サーバーへの通信は行いますがAPIの実行はされてないと思います。javascriptがほとんどないページなので…

[miyabi_pudding]

？
ではなぜactionのURLが、同ページなのですか？
そのサイトのURLを指定すればいいかと思いますが。

というか、ログインに関しては、
サイトで様々な処理を行なっている可能性があるため、こちらで勝手に何かしろの処理をさせようとしてもうまくいかないかと思いますし、下手したら、規約違反とかに相当する可能性すらあります。
素直に泣き寝入りするか、そのサイトさんに問い合わせした方がいいかと・・・。

[miyabi_pudding]

か、スクレイピングとかの方がいいかもですね。
多くのサイトでは、そういうバッチ処理（自動で大量処理とか）を嫌っており、対策を施しているものです

Answer 1

.submit()が聞かない根本的な原因がわからず質問させてもらいました。

そのサイトではボタンのonClickに何かが仕掛けられていて、それが動作することで正しくフォームが送信されるようになっていた、というような状況も考えられます。

Comments

[yen]

すみません問題のページのURLを追記しました。時間があれば回答よろしくお願いします。。

Answer 2

form要素のactionは、指定されたURLへ、内容を、mthodで指定した方式で送信しつつ、アクセス、なので、その指定のみでは、リロードされて終了です。

<div class="column one">
    <form action="同ページURL" method="post" onsubmit="return false; /* いったん物理的に処理を止める */">

        <!-- ユーザーID入力フォームなど色々 -->

        <div class="form-element-wrapper">
            <button class="form-element form-button" type="submit" name="_eventId_proceed">Login</button>
        </div>
    </form>
</div>

document.querySelector(".column.one>form").addEventListener('submit', function(){
  // いろいろ処理
  // 改めて送信
  this.submit();
});

のように、送信時になんやかんや処理したいなら、送信を物理的に（HTML的に）いったん止め、改めてjsで様々処理した上で、送信、とすると無難です。

ちなみに、フロントエンドのみでは、（JavaScriptでも）POST送信の内容は受け取れませんので、
今のままでは、ログイン処理としては何もできないと思いますよ。

Answer 3

普通にサブミットされますね。
トリガーはページが開かれたときでよいのですよね？

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('.column.one>form').submit();
});

Comments

[yambejp]

formのactionを自分自身にしないよう気をつけてください
（ループしてしまいます）

[yen]

回答ありがとうございます。
formのactionに同ページが指定されていますね…
少しそのあたりを調べてみてそれで解決したらベストアンサーにさせてもらいます、本当にありがとうございました

[yambejp]

同ページにするなら「ページ読み込み時」の処理はやめてください
たとえば何かをクリックしたときとか、ページが読まれて10秒後とか
なんらかの無条件無限ループを回避する処理で対応ください

[yen]

返信に気付いておらずすみません、userscriptに入れるときにはsetTimeoutとaddEventListenerを使用して対処したいと思います。