0

I'm trying to fill out a user form using javascript, however when I use .value to change the element to the customer's name it doesn't work properly. The value change, however once I save the form, the value changed back to its original value. This is the piece of HTML where I'm targeting the customer's name

<span class="next-input next-medium"><input placeholder="Name" height="100%" autocomplete="off" value="insert-customer-name" data-spm-anchor-id="a2g0o.placeorder.0.i5.f94f29fdF6dfJe"></span>

What I wrote is:

const inputElement = document.querySelector('.next-input.next-medium input');
inputElement.value = 'Customer Name';

I even tried with

const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window });
inputElement.dispatchEvent(clickEvent);

// Set the value of the input element to 'Customer Name'
inputElement.value = 'Customer Name';

However all the time, the value change to "Customer Name" and then as soon as I manually click on the input or save the form it changed back to 'insert-customer-name' which was the original value.

I would have used puppeteer, but I'm trying to build a chrome extension so I have to stick with javascript since puppeteer is not supported.

Could you please help me to solve it? thanks a lot in advance!

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
Lord
  • 153
  • 1
  • 4
  • 15
  • Does you use
    tag? If yes, then after submitting your page is reloaded and your data is deleted.
     – Andrii Vynarchuk Apr 27 '23 at 17:51
  • yes, it's indeed inside a
    tag, any solution in this case?
     – Lord Apr 27 '23 at 17:54
  • why not setting the value inside a `document.addEventListener("DOMContentLoaded", () => { //your code here });` – Chris G Apr 27 '23 at 17:56
  • It's generally up to the web site that processes the form to show the latest value when redisplaying it. That's not something you need to do in your code. – Barmar Apr 27 '23 at 17:58
  • just to provide more context, the page where I need to fill out the name is the Aliexpress checkout page – Lord Apr 27 '23 at 18:04
  • Try the deprecated document.execCommand, [example](/a/57900849). – wOxxOm Apr 27 '23 at 22:00

1 Answers1

0

As you use form tag then when you submit your form, browser automatically reloads your page (and imitate sending to the server ), so your data loses. One of the solution is add this function

Just write at the top of your JS file, where you are changing value this code:

const element = document.querySelector('form');
element.addEventListener('submit', event => {
  event.preventDefault();
  // actual logic, e.g. validate the form
  console.log('Form submission cancelled.');
});

You can read more here.

Hope it helps :)

Andrii Vynarchuk
  • 96
  • 6
  • It didn't work unfortunately, just to provide more context, the page where I need to fill out the name is the Aliexpress checkout page – Lord Apr 27 '23 at 18:04
  • @Lord I made it easier for you and edited it a bit, just put the code above in your JS file. If you have any other forms, then give some unique identifier when picking element with querySelector (class or id). P.S I shared the resource for your in the answer, where you can find another solution for your example. – Andrii Vynarchuk Apr 27 '23 at 18:09
  • still not working – Lord Apr 27 '23 at 19:29