It only works on PC, Windows, and Android. about learn-to-send-email-via-google-script-html-no-server HOT 5 OPEN

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

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>

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>