質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

3873閲覧

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

yen

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/17 01:50

編集2020/06/17 16:31

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

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

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

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

html

1<div class="column one"> 2 <form action="(URL)" method="post"> 3 4 <!-- ユーザーID入力フォームなど色々 --> 5 6 <div class="form-element-wrapper"> 7 <button class="form-element form-button" type="submit" name="_eventId_proceed" 8 onClick="this.childNodes[0].nodeValue='ログインしています…'">Login</button> 9 </div> 10 </form> 11</div>

動かなかったもの

javascript

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

動いたもの(.click使用)

javascript

1 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やパスワードはブラウザのオートフィル機能により自動入力されています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/06/17 02:30

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

2020/06/17 02:40

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

2020/06/17 03:20

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

2020/06/17 03:41

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

2020/06/17 04:03

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

2020/06/17 04:08

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

回答3

0

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

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

投稿2020/06/17 04:08

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yen

2020/06/17 04:25

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

0

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

html

1<div class="column one"> 2 <form action="同ページURL" method="post" onsubmit="return false; /* いったん物理的に処理を止める */"> 3 4 <!-- ユーザーID入力フォームなど色々 --> 5 6 <div class="form-element-wrapper"> 7 <button class="form-element form-button" type="submit" name="_eventId_proceed">Login</button> 8 </div> 9 </form> 10</div>

javascript

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

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

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

投稿2020/06/17 03:38

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

javascript

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

投稿2020/06/17 02:34

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/06/17 02:35

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

2020/06/17 02:43

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

2020/06/17 03:32

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

2020/06/17 04:02

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問