Calendar and submit button

301 views
Skip to first unread message

Frank Thompson

unread,
Mar 30, 2023, 12:04:27 AM3/30/23
to Autofill Extension
Hello All,

I am trying to get a form to auto fill the date in a calendar. I cannot share it because it is locked but I can show you the code for  the calendar question before entering date:
<input type="text" id="DatePicker0-label" role="combobox" aria-expanded="true" aria-haspopup="dialog" placeholder="Please input date (M/d/yyyy)" aria-labelledby="QuestionId_r774071368a0b4276a292d2c2edc23fee QuestionInfo_r774071368a0b4276a292d2c2edc23fee" class="ms-TextField-field field-216" aria-label="Date picker" aria-describedby="TextFieldDescription3" aria-invalid="false" aria-controls="DatePicker-Callout1">

and after entering date:
<input type="text" id="DatePicker0-label" role="combobox" aria-expanded="false" aria-haspopup="dialog" placeholder="Please input date (M/d/yyyy)" aria-labelledby="QuestionId_r774071368a0b4276a292d2c2edc23fee QuestionInfo_r774071368a0b4276a292d2c2edc23fee" class="ms-TextField-field field-216" aria-label="Date picker" aria-describedby="TextFieldDescription3" aria-invalid="false">

I followed the basic calendar advice but it has not worked.

I am also trying to click the submit button at the end and I've tried some things from the javascript tutorial but to no avail. Here is the script from inspecting the button:
<button data-automation-id="submitButton" class="css-170">Submit</button>

Any and all help is most appreciated!!!

Autofill Extension

unread,
Mar 30, 2023, 1:38:21 AM3/30/23
to Autofill Extension
Hi Bob,

Try this rule for date field...

Type = Text
Name = ^DatePicker0-label$
Value = 3/29/2023

To click submit button, add this JS rule...

Type = JavaScript
Value = 
const submitBtn = document.querySelector('[data-automation-id="submitButton"]');
if (submitBtn) submitBtn.click();

To add a delay, use this code instead for Value:

setTimeout(() => {
  const submitBtn = document.querySelector('[data-automation-id="submitButton"]');
  if (submitBtn) submitBtn.click();
}, 1000); // 1s delay

Tom

Frank Thompson

unread,
Mar 30, 2023, 10:24:12 PM3/30/23
to Autofill Extension
Hey thanks for the reply and help!

I tried both and neither worked.

For the calendar I realized when you first click on the text area a calendar pops open and you cannot type, only click on the date. You have to click on the text area again to be able to type the date out manually. So it requires two clicks into the text box to be able to type if that is what is messing up the code. Also I am not sure if it should be in overwrite mode? Picture below.

I also tried the JS code exactly as you wrote for the button and it did not work.:
const submitBtn = document.querySelector('[data-automation-id="submitButton"]');
if (submitBtn) submitBtn.click();

Any other suggestions would help, especially with the calendar as it is the biggest roadblock to getting the form filled out quickly, and would be appreciated!
Untitled.jpg

Autofill Extension

unread,
Apr 3, 2023, 1:43:38 PM4/3/23
to Autofill Extension
Sorry, it's hard for me to troubleshoot further without have access to the actual page -- do you have a URL I can use for testing? This doesn't look like a normal form -- it's definitely using JavaScript in the background which is conflicting with the autofilling.

Frank Thompson

unread,
Apr 3, 2023, 10:42:09 PM4/3/23
to Autofill Extension

Autofill Extension

unread,
Apr 5, 2023, 2:09:26 AM4/5/23
to Autofill Extension
Hi, this rule worked for me just now:

Type = Text
Name = ^Please input date \(M/d/yyyy\)$
Value = 4/4/2023

Frank Thompson

unread,
Apr 5, 2023, 9:58:41 PM4/5/23
to Autofill Extension
That still did not work. What mode did you set it in? Also I still can not get the submit button to work.

Autofill Extension

unread,
Apr 7, 2023, 7:35:45 PM4/7/23
to Autofill Extension
It worked on the preview form, but not the live form. In order to make it work on the live form, I had to use a JS rule. Replace the previous rule with this rule:

Type = JavaScript
Value =
setTimeout(() => {
  const dob = document.querySelector('[placeholder="Please input date (M/d/yyyy)"]');
  if (dob) {
    dob.value = '4/4/2023';
    dob.dispatchEvent(new Event('input'));
  }
}, 0); // Replace 0 with a larger number if it's unreliable


Hope the above works for you.

FYI I won't be available until April 16th.

Autofill Extension

unread,
Apr 7, 2023, 7:36:13 PM4/7/23
to Autofill Extension
P.S. Don't forget to set a site filter...

Reply all
Reply to author
Forward
0 new messages