javascriptでログインしたい

実現したいこと

①以下URLにアクセス
②iAEONのIDとPWを入力
③ログインボタンクリック

https://gate.aeon.com/auth/login?csid=newns_smp&next=https%3A%2F%2Fshop.aeon.com%2Fnetsuper%2Fcustomer%2Faccount%2Flogin%2F&crtn=https%3A%2F%2Fshop.aeon.com%2Fnetsuper%2F&switching=OFF

発生している問題・分からないこと

②iAEONのIDとPWを入力

ID、PWそれぞれのinput要素に対して.value = "xxxx"で入力自体はできるのですが
表示だけでログインボタンが非活性のままになっており、
input要素をクリックすると、javascriptで入力した値が消えてしまいます。

該当のソースコード

javascript
1// ID入力
2document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(1) > div > div > input").value = "xxxx";
3
4// PW入力
5document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(2) > div > div > div.c-pwd-input__container > input").value = "xxxx";
6
7// ログインボタンクリック
8document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div.p-login__form-footer > button").click();

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

値を入力する前にclickするコードを追加しましたが、結果は変わりませんでした。

javascript
1// ID入力欄クリック
2document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(1) > div > div > input").click();
3
4// ID入力
5document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(1) > div > div > input").value = "xxxx";
6
7// PW入力欄クリック
8document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(2) > div > div > div.c-pwd-input__container > input").click();
9
10// PW入力
11document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div:nth-child(2) > div > div > div.c-pwd-input__container > input").value = "xxxx";
12
13// ログインボタンクリック
14document.querySelector("#__layout > div > div.t-login > main > div > div > section.c-section.p-login__forms > div:nth-child(2) > div > div.c-login-card__body.c-login-body-iaeon > div > form > div.p-login__form-footer > button").click();

補足

特になし

Lhankor_Mhy

2024/01/04 06:01

とりあえず、disabled を消してみてはどうでしょうか？

m_54

2024/01/04 09:17

「ID」や「PW」入力欄はdisabledがfalseになっており、「ログイン」ボタンは「ID」「PW」入力完了後に自動的にdisabledがfalseになるので、関係ないかと思います。

Lhankor_Mhy

2024/01/04 10:09

自動的ではなくて手動でdisabledをfalseにしてみれば、ログインボタンを活性化してPOSTできるのでは、というコメントでした。（それで送信がされているのは確認できました）ですが、質問をよく読むと、ログインしたいという内容ではなくて、フォームの内容が消える理由は何か、というものだったのですね。的外れで失礼しました。

m_54

2024/01/04 14:33 編集

javascriptでログインしたく、その過程のID・PWの入力で躓いてしまっているという質問になります。

Lhankor_Mhy

2024/01/05 09:49

手動でdisabledをfalseにしたものをいろいろ試してみましたが、送信はされていてもログイン情報が正しく付されていないようでした。イベントハンドラで何か処理をしていると思います。

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

回答1件

ベストアンサー

こうすると、input要素をクリックしてもjavascriptで入力した値が消えなくなると思います。

js
1document.querySelectorAll('input[type="email"],input[type="password"]').forEach(input=>{
2  input.addEventListener('focus',e=>{e.stopImmediatePropagation()},{capture:true})
3  input.value = 'test@test.com'
4})