It only works on PC, Windows, and Android.

[nextron-microprobe]

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.

[cristianofromagio]

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?

[nextron-microprobe]

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 <#451 (comment)>, 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

[cristianofromagio]

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):

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));

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 (Thank you message not working on mobile #351, ajax post works on pc but doesnt on mobile phones? #425).

[nextron-microprobe]

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: <!-- 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] <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. - *Report the error "upstream" to Safari*: the issue "form.elements should not contain image elements." <https://bugs.webkit.org/show_bug.cgi?id=87834> 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 <#351>, #425 <#425> ). — Reply to this email directly, view it on GitHub <#451 (comment)>, 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]

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: > > <!-- 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] > <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. > > - *Report the error "upstream" to Safari*: the issue "form.elements > should not contain image elements." > <https://bugs.webkit.org/show_bug.cgi?id=87834> 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 > <#351>, > #425 > <#425> > ). > > — > Reply to this email directly, view it on GitHub > <#451 (comment)>, > 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