Почему нельзя вставить значение в поле?

Question

[sidorikv]

Всех приветствую!
Пишу маленькое расширение которое будет заполнять поля для ввода данных за тебя, как только страница прогрузилась полностью. Для этого я сделал вот такой кусочек кода:

$(document).ready(function(){
    //функции здесь
});

Но у меня возникла проблема. Я уже перепробовал все что можно, искать по id и писать value, и через jquery, ничего не выходит. Выцепляю input, пытаюсь в него вбить значение - ничего
Был бы рад помощи.
Вот сам код кнопки input с сайта, с которым я пытаюсь работать:

<input aria-labelledby="undefined_label" required="" class="gl-input__field gl-input__field--with-icon" placeholder=" " type="text" name="firstName" maxlength="33" data-auto-id="shippingAddress-firstName" autocomplete="given-name" value="">

Comments

[Spartak (Web-StyleStudio)]

Ну и где js код? Или нам угадывать?

[sidorikv]

Spartak (Web-StyleStudio), ах точно, прошу прощения, кипит голова :D
Вот примеры которые пытался использовать:
1. Просто замена значения через jquery
$('#shippingAddress-firstName').val("Vladimir");
2. Сначала клик, потом значение

$('#shippingAddress-firstName').trigger('click');
    $('#shippingAddress-firstName').val("Vladimir");

3. Пытался через обычный js искать по селектору:

document.querySelectorAll(':nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(1) > div > input').value = "Name";

[Spartak (Web-StyleStudio)]

required=""

P/s: required так не пишется, ="" - это не надо

[sidorikv]

Spartak (Web-StyleStudio), это код на сайте

[sidorikv]

Spartak (Web-StyleStudio), upd
У меня вашло. Я смог вставить текст в поле через этот код:

$(':nth-child(2) > :nth-child(1) > :nth-child(1) > :nth-child(1) > div > input').val("Vladimir");

Но сайт считает, что в поле ничего нет

[Spartak (Web-StyleStudio)]

sidorikv,

$('#shippingAddress-firstName')

У вас нет такого айдишника

[Spartak (Web-StyleStudio)]

sidorikv,

$('input[data-auto-id="shippingAddress-firstName"]').val("Vladimir");

[sidorikv]

Spartak (Web-StyleStudio), этот вариант тоже годится!)
Но проблема остается, при клике например на другое поле или на кнопку отправить, все значения из полей стираются и пишет "Введите данные" сайт в тупую не видит этого ввода. Может быть прокликать нужно div в котором input?

[Spartak (Web-StyleStudio)]

sidorikv,
Напишите полный код html и js, так не понятно что вы пытаетесь сделать
Желательно выложить код на https://codepen.io/

[Чипекве]

sidorikv,
Значит формы контролируемые и пишутся в стейт.

Вот для реакта решение: Как запустить dispatchEvent?

[sidorikv]

Чипекве, то есть получается, мне нужно все кидать на реакт?
Я не придуриваюсь, вы уж простите, я немного новичок

[Spartak (Web-StyleStudio)]

sidorikv,

то есть получается, мне нужно все кидать на реакт?

Не нужен никакой реакт.
Пришлите html и js код, и напишите конкретно что вы хотите получить в итоге

[sidorikv]

Spartak (Web-StyleStudio), полностью с сайта взять код именно данной формы и написать его в https://codepen.io/
?

[Spartak (Web-StyleStudio)]

sidorikv,

полностью с сайта взять код именно данной формы и написать его в

Да, и javascript код с которым у вас проблема

[sidorikv]

Spartak (Web-StyleStudio), В том то и соль!
Смотрите, вот я вам скинул ссылку на кодпен.
https://codepen.io/Sidorik-v/pen/KKWXqeK
Там полный код формы ( html ) и js код человека ниже, он работает! Он заменяет и вписывает что нужно, но вот что мне выдает сайт:

[Spartak (Web-StyleStudio)]

sidorikv,

js код человека ниже, он работает

Ваш код где?

[sidorikv]

Spartak (Web-StyleStudio), так я сюда собственно и пришел с нерабочим кодом который кидал вышел. Сейчас мой код выглядит так:

$(document).ready(function(){
    setTimeout(add_info, 1500);
});

function add_info() {
    $('input[data-auto-id="shippingAddress-firstName"]').val("Vladimir");
}

[sidorikv]

Spartak (Web-StyleStudio), я прикрепил гифку. Вот так сейчас работает данный код. Он по сути заполняет что надо, на после клика на другое поле сайт просто теряет текст ( вы можете наблюдать это на гифке )

[Spartak (Web-StyleStudio)]

sidorikv,
Давайте сначала.
Что вы хотите от js кода? Чтобы он угадал данные пользователя - ФИО, адрес итд, и вставил их в форму?
Или автозаполнение формы браузером?

[sidorikv]

Spartak (Web-StyleStudio), я пишу маленькое расширение. Пока без визуальной части ( попап меню, где будут формы. Там можно будет указать ту информацию, которую будет вписывать расширение ) пока я просто хочу сделать это через код. В коде пишешь что у тебя будет в поле имя, то имя и будет в поле после исполнения кода расширением

[sidorikv]

Spartak (Web-StyleStudio), js код вписывает, но происходит то, что на гифке выше

[Spartak (Web-StyleStudio)]

sidorikv,
На гифке вообще не понятно что вы там делаете?

[sidorikv]

Я перезагружаю страницу. В поле "Имя" появляется имя Vladimir, его вписывает код. Дальше я жму мышкой на соседнее поле "Фамилия", имя "Vladimir" из поля "Имя" исчезает, а сайт думает, что там ничего нет

[Spartak (Web-StyleStudio)]

sidorikv,

Дальше я жму мышкой на соседнее поле "Фамилия", имя "Vladimir" из поля "Имя" исчезает, а сайт думает, что там ничего нет

Это не сайт думает, это автозаполнение формы браузером срабатывает, когда вы тыкаете на предложенный браузером вариант заполнения в поле фамилия!

Либо у вас js скрипт на сайте отслеживает заполнение формы и вносит свои коррективы (согласно коду) и отслеживает события ввода/изменения итд и авто-сабмитит данные формы на сервер

[sidorikv]

Spartak (Web-StyleStudio), а как можно тогда реализовать идею?

[Spartak (Web-StyleStudio)]

sidorikv,
По гифке, всё же предположу что у вас на сайте js код проверяет поля ввода формы и скорее всего идёт проверка на валидность данных, например проверяет что в поле имя - имя должно быть указано на кирилице, и таким образом скрипт заменяет не корректно введённые данные.
Попробуйте ввести имя на кирилице (русские буквы), и посмотрите будет ли имя удаляться

[sidorikv]

Spartak (Web-StyleStudio), к сожалению нет. Прошу прощения за столь долгий ответ. Я понимаю, что это очень нагло, но я все же рискну, так как скромность до результата не доведет.
Как у вас будет время, может быть желание.
На сайте adidas.ru добавьте любой товар в корзину и пройдите на страницу оформления. Вы увидите эту форму, может быть у вас выйдет!

[Spartak (Web-StyleStudio)]

sidorikv,

На сайте adidas.ru добавьте любой товар в корзину и пройдите на страницу оформления. Вы увидите эту форму, может быть у вас выйдет!

Без проблем заполнил форму, таких фокусов как у вас на гифке не было

[sidorikv]

Spartak (Web-StyleStudio), вы кодом заполнили? То есть, вставили его просто в консоль сайта? Или именно вручную?

[Spartak (Web-StyleStudio)]

sidorikv,
Вручную, как на гифке

[sidorikv]

Spartak (Web-StyleStudio), в том то и соль. На картинке просто работает скрипт после перезагрузке страницы. Видете? Я перезагрузил страницу, в расширении скрипт вставил в поле на сайте слово, но после того как я уже сам мышкой нажал на следующее поле, слово в первом пропало

[Spartak (Web-StyleStudio)]

sidorikv,
Попробуйте так

function add_info() {
    $('input[data-auto-id="shippingAddress-firstName"]').val("Vladimir").change();
}

Если форма обрабатывается js скриптом на вашем сайте, то change() даст знать что поле изменилось.

[sidorikv]

Spartak (Web-StyleStudio), не сработало. Я думаю, что там просто защита стоит. Наверное мне стоит просто делать это все запросом и предоставлять куки итд. Так будет и быстрее, и лучше

[Spartak (Web-StyleStudio)]

sidorikv,

Я думаю, что там просто защита стоит.

Вряд-ли. Надо смотреть js код сайта

[sidorikv]

Spartak (Web-StyleStudio), В любом случае, реально большое вам спасибо!

Answer 1

[Чипекве]

1. Чтобы получить форму, нужно использовать MutationObserver, так как на момент DOMContentLoaded форма еще не будет на странице.

2. Чтобы добавить данные в реактовскую форму, нужно диспатчить событие input после добавления данных. У реакта свои события, поэтому делать нужно так: https://stackoverflow.com/a/46012210/14550686