It only works on PC, Windows, and Android. #451
Comments
|
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? |
|
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
|
|
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 specificallyIf 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: Breaking down the issueThis 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 In this piece of code,
When we try accessing it using 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 What can we do to fix this?Although our specific issue is with an integer
|
|
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>
|
|
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
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: