learn-to-send-email-via-google-script-html-no-server icon indicating copy to clipboard operation
learn-to-send-email-via-google-script-html-no-server copied to clipboard

Published 20 hours ago • verified publisher icon dwyl

It only works on PC, Windows, and Android.

Open nextron-microprobe opened this issue 1 year ago • 5 comments

Ajax is executed when you press the Send button only on PC, Windows, and Android, but does not proceed on iPhone. I tried changing "ajax" to "fetch" to fetch, but it still doesn't work. I didn't always check while updating several times, but I suddenly found that it wasn't working. No code was touched. Although the HTML has been modified, it cannot be explained that it runs in an environment other than iOS.

I've already done things like open the JavaScript toggle or clear cookies in Safari's settings.

Chrome also did the same thing, but only on the iPhone, no matter how many times I pressed the "send button", it didn't work. The email doesn't arrive, and the "thankyou_message" doesn't appear either.

nextron-microprobe avatar Nov 16 '23 08:11 nextron-microprobe

Do you have any console errors while running on Safari? Chrome on iOS (if I'm not mistaken) also runs WebKit under the hood (like Safari).

Do you have a reproducible code example or have it hosted online somewhere?

cristianofromagio avatar Nov 16 '23 20:11 cristianofromagio

All desktops and laptops in our office are Windows systems and we don't have a Mac, so we need to install iTunes and node.js.

However, I am unable to proceed with this process because a 404 error appears on the node.js homepage.

What I can do is check to see if webkit is used in CSS and if any of my colleagues use a MacBook. I really want to check the console error, but I can't, so it's frustrating.

Thanks for the reply. I'll be sure to contact you later when I get a MacBook, solve a problem, or check for console errors.

2023년 11월 17일 (금) 오전 5:19, Cristiano Fromagio @.***>님이 작성:

Do you have any console errors while running on Safari? Chrome on iOS (if I'm not mistaken) also runs WebKit under the hood (like Safari).

Do you have a reproducible code example or have it hosted online somewhere?

— Reply to this email directly, view it on GitHub https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451#issuecomment-1815252755, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYR3X2KNVYY4WRAX67K7O6DYEZYNPAVCNFSM6AAAAAA7NWYUJ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJVGI2TENZVGU . You are receiving this because you modified the open/close state.Message ID: <dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451/1815252755 @github.com>

--

Overseas Marketing Team Yereong Kang, Designer Email: @.*** Website: www.microprobesystem.com Tel: +82 51 512 6771 Fax: +82 51 512 6737 Address: 609, V1 Tower, 273-20 Gaejwa-Ro, Geumjeong-Gu, 46257 Busan, Korea

nextron-microprobe avatar Nov 16 '23 23:11 nextron-microprobe

I went ahead and tried to reach the Contact page (archived version for reference) from the website in your signature, and indeed, said Contact form failed to submit on Safari.

Solving your issue specifically

If you just want to make this form work on Safari, change the id value on these image elements inside your form to something other than numbers:

<!-- find each one in the code, they are not grouped like this -->

<img style="position:absolute; opacity: 0;" src="./image/update/piezoModule.webp" align="center" id="1002" class="preview" alt="">
<img style="position:absolute; opacity: 0;" src="./image/update/probeModule.webp" align="center" id="1001" class="preview" alt="" title="">
<img style="position:absolute; opacity: 0;" src="./image/update/ModuleDuo.webp" align="center" id="1003" class="preview" alt="">

Notice their ids: id="1002", id="1001" and id="1003". Change them to something else that is not just an integer number, for example id="img1002", id="img1001" and id="img1003". Just that will solve this form specific problem. To understand why, read the explanation below.

Breaking down the issue

This is the error that appears on the console when we try to submit the form in Safari (here I'm using Webkit MiniBrowser on Windows, but should apply to Safari as well):

image

image

This is the related line in our script. Notice the problem is it can't find the name property because (allegedly) elements[k] is undefined.

In this piece of code, elements refers to form.elements a property that returns a HTMLFormControlsCollection. We can access an entry on this collection by an index, by its name attribute or by its id attribute.

You can access a particular form control in the returned collection by using either an index or the element's name or id attributes. ref.

When we try accessing it using elements[k].name, k is one of the HTMLFormControlsCollection keys we get by passing it through the Object.keys() function.

This is what we get on Firefox (left), Chromium (middle) and Safari (right) when we run this script in the page:

// `form` being the contact form

Object.keys(form.elements).map((k) => {
  console.log(k, form.elements[k]);
});

console.log(Object.keys(form.elements));

image

Notice that, apart from the difference in size of Object.keys(form.elements) in each one of them, in Safari the 1002, 1001 and 1003 key returns an undefined element because it tries to find the item in the HTMLFormControlsCollection by its id but because it is an integer it confuses it with an index. That is why changing the img element id to a string solves the problem in this case.

What can we do to fix this?

Although our specific issue is with an integer id acting as an index, the real issue is that image elements shouldn't even be returned in the HTMLFormControlsCollection.

  • Report the error "upstream" to Safari: the issue "form.elements should not contain image elements." is a known bug reported in the Safari bug-tracker. We can improve by contributing to it and reporting it further with examples and reproductible scenarios.
  • Improve our script to safe-guard these edge cases: at first glance, this issue should not be possible ("all form elements' keys should return a valid form element"), but as we just saw, this can break and halt the execution of our script. This could also solve other issues that might be related to this specific problem (#351, #425).

cristianofromagio avatar Nov 20 '23 14:11 cristianofromagio

Okay i 'll try in this week and reply again. Thanks a lot!

2023년 11월 20일 (월) 오후 11:21, Cristiano Fromagio @.***>님이 작성:

I went ahead and tried to reach the Contact page https://www.microprobesystem.com/contact.html (archived version for reference https://web.archive.org/web/20230531023249/https://www.microprobesystem.com/contact.html) from the website in your signature, and indeed, said Contact form failed to submit on Safari. Solving your issue specifically

If you just want to make this https://www.microprobesystem.com/contact.html form work on Safari, change the id value on these image elements inside your form to something other than numbers:

Notice their ids: id="1002", id="1001" and id="1003". Change them to something else that is not just an integer number, for example id="img1002", id="img1001" and id="img1003". Just that will solve this form specific problem. To understand why, read the explanation below. Breaking down the issue

This is the error that appears on the console when we try to submit the form in Safari (here I'm using Webkit MiniBrowser on Windows, but should apply to Safari as well):

[image: image] https://user-images.githubusercontent.com/16294559/284115892-c351cb9d-5380-4e67-9fbb-8595292e7812.png

[image: image] https://user-images.githubusercontent.com/16294559/284116442-bbd24fd7-3ed6-4a02-84d5-0aae5cb0c373.png

This is the related line https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/6b1122f7805dba5bb48150a0ca8d000b12032884/form-submission-handler.js#L8 in our script. Notice the problem is it can't find the name property because (allegedly) elements[k] is undefined.

In this piece of code, elements refers to form.elements https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements a property that returns a HTMLFormControlsCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection. We can access an entry on this collection by an index, by its name attribute or by its id attribute.

You can access a particular form control in the returned collection by using either an index or the element's name or id attributes. ref. https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements#:~:text=You%20can%20access%20a%20particular%20form%20control%20in%20the%20returned%20collection%20by%20using%20either%20an%20index%20or%20the%20element%27s%20name%20or%20id%20attributes.

When we try accessing it using elements[k].name, k is one of the HTMLFormControlsCollection keys we get by passing it through the Object.keys() function.

This is what we get on Firefox (left), Chromium (middle) and Safari (right) when we run this script in the page:

// form being the contact form Object.keys(form.elements).map((k) => { console.log(k, form.elements[k]);}); console.log(Object.keys(form.elements));

[image: image] https://user-images.githubusercontent.com/16294559/284271834-cba5e0a2-3941-43ba-845b-099f28bed874.png

Notice that, apart from the difference in size of Object.keys(form.elements) in each one of them, in Safari the 1002, 1001 and 1003 key returns an undefined element because it tries to find the item in the HTMLFormControlsCollection by its id but because it is an integer it confuses it with an index. That is why changing the img element id to a string solves the problem in this case. What can we do to fix this?

Although our specific issue is with an integer id acting as an index, the real issue is that image elements shouldn't even be returned in the HTMLFormControlsCollection.

— Reply to this email directly, view it on GitHub https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451#issuecomment-1819158002, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYR3X2NRTO6SKRR4EHC4UVTYFNRPDAVCNFSM6AAAAAA7NWYUJ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJZGE2TQMBQGI . You are receiving this because you modified the open/close state.Message ID: <dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451/1819158002 @github.com>

nextron-microprobe avatar Nov 21 '23 01:11 nextron-microprobe

Hello, I corrected the three problematic IDs and modified the JS code, and it worked normally in Safari on the iPhone. thank you so much for your help!

2023년 11월 21일 (화) 오전 10:56, Yereong Kang @.***>님이 작성:

Okay i 'll try in this week and reply again. Thanks a lot!

2023년 11월 20일 (월) 오후 11:21, Cristiano Fromagio @.***>님이 작성:

I went ahead and tried to reach the Contact page https://www.microprobesystem.com/contact.html (archived version for reference https://web.archive.org/web/20230531023249/https://www.microprobesystem.com/contact.html) from the website in your signature, and indeed, said Contact form failed to submit on Safari. Solving your issue specifically

If you just want to make this https://www.microprobesystem.com/contact.html form work on Safari, change the id value on these image elements inside your form to something other than numbers:

Notice their ids: id="1002", id="1001" and id="1003". Change them to something else that is not just an integer number, for example id="img1002", id="img1001" and id="img1003". Just that will solve this form specific problem. To understand why, read the explanation below. Breaking down the issue

This is the error that appears on the console when we try to submit the form in Safari (here I'm using Webkit MiniBrowser on Windows, but should apply to Safari as well):

[image: image] https://user-images.githubusercontent.com/16294559/284115892-c351cb9d-5380-4e67-9fbb-8595292e7812.png

[image: image] https://user-images.githubusercontent.com/16294559/284116442-bbd24fd7-3ed6-4a02-84d5-0aae5cb0c373.png

This is the related line https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/blob/6b1122f7805dba5bb48150a0ca8d000b12032884/form-submission-handler.js#L8 in our script. Notice the problem is it can't find the name property because (allegedly) elements[k] is undefined.

In this piece of code, elements refers to form.elements https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements a property that returns a HTMLFormControlsCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormControlsCollection. We can access an entry on this collection by an index, by its name attribute or by its id attribute.

You can access a particular form control in the returned collection by using either an index or the element's name or id attributes. ref. https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements#:~:text=You%20can%20access%20a%20particular%20form%20control%20in%20the%20returned%20collection%20by%20using%20either%20an%20index%20or%20the%20element%27s%20name%20or%20id%20attributes.

When we try accessing it using elements[k].name, k is one of the HTMLFormControlsCollection keys we get by passing it through the Object.keys() function.

This is what we get on Firefox (left), Chromium (middle) and Safari (right) when we run this script in the page:

// form being the contact form Object.keys(form.elements).map((k) => { console.log(k, form.elements[k]);}); console.log(Object.keys(form.elements));

[image: image] https://user-images.githubusercontent.com/16294559/284271834-cba5e0a2-3941-43ba-845b-099f28bed874.png

Notice that, apart from the difference in size of Object.keys(form.elements) in each one of them, in Safari the 1002, 1001 and 1003 key returns an undefined element because it tries to find the item in the HTMLFormControlsCollection by its id but because it is an integer it confuses it with an index. That is why changing the img element id to a string solves the problem in this case. What can we do to fix this?

Although our specific issue is with an integer id acting as an index, the real issue is that image elements shouldn't even be returned in the HTMLFormControlsCollection.

— Reply to this email directly, view it on GitHub https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451#issuecomment-1819158002, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYR3X2NRTO6SKRR4EHC4UVTYFNRPDAVCNFSM6AAAAAA7NWYUJ2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMJZGE2TQMBQGI . You are receiving this because you modified the open/close state.Message ID: <dwyl/learn-to-send-email-via-google-script-html-no-server/issues/451/1819158002 @github.com>

--

Overseas Marketing Team Yereong Kang, Designer Email: @.*** Website: www.microprobesystem.com Tel: +82 51 512 6771 Fax: +82 51 512 6737 Address: 609, V1 Tower, 273-20 Gaejwa-Ro, Geumjeong-Gu, 46257 Busan, Korea

nextron-microprobe avatar Nov 23 '23 01:11 nextron-microprobe