Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30862 > unrolled thread

Interesting form functionality difference

Back to article view | Back to comp.lang.javascript

Contents

  Interesting form functionality difference Robert Baer <robertbaer@localnet.com> - 2016-07-14 00:36 -0800
    Re: Interesting form functionality difference Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-07-14 10:57 +0100
      Re: Interesting form functionality difference Robert Baer <robertbaer@localnet.com> - 2016-07-14 17:40 -0800
        Re: Interesting form functionality difference Robert Baer <robertbaer@localnet.com> - 2016-07-14 18:03 -0800
      Re: Interesting form functionality difference Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-07-15 08:27 +0200
        Re: Interesting form functionality difference Robert Baer <robertbaer@localnet.com> - 2016-07-16 19:47 -0800
          Re: Interesting form functionality difference Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-07-17 20:31 +0200
            Re: Interesting form functionality difference Robert Baer <robertbaer@localnet.com> - 2016-07-19 20:27 -0800
              Re: Interesting form functionality difference Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-07-24 18:40 +0200

#30862 — Interesting form functionality difference

   The form in my page http://www.oil4lessllc.com/index-4.html works 
perfectly IF AND ONLY IF one is online.
   Copy all of the supporting folders and files, and the user-visible 
attributes look the same, but the entries do not get received.

   Any ideas as to why?

[toc] | [next] | [standalone]

#30863

Robert Baer <robertbaer@localnet.com> writes:

>   The form in my page http://www.oil4lessllc.com/index-4.html works
> perfectly IF AND ONLY IF one is online.
>   Copy all of the supporting folders and files, and the user-visible
> attributes look the same, but the entries do not get received.
>
>   Any ideas as to why?

At first glance it looks like the form is handled by PHP using a
relative URL.  Unless you are running a PHP compatible server locally
(and your use of the phrase "all of the supporting folders and files"
suggests you are not) then it can't work offline.

You could try changing

  mailHandlerURL:'bat/MailHandler.php'

to

  mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php'

so the same PHP resource is used even when the pages are just local
files.

It's a shame that this is all done using client-side scripting.  You'd
get a very much more obvious error if the form element had an action
attribute.  Client-side scripting should really only be used to add
features that assist the user, rather than being responsible for basic
functionality like submitting the form.

But, as I say, first glance.  And you have hundreds of lines of script.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#30866

Ben Bacarisse wrote:
> Robert Baer<robertbaer@localnet.com>  writes:
>
>>    The form in my page http://www.oil4lessllc.com/index-4.html works
>> perfectly IF AND ONLY IF one is online.
>>    Copy all of the supporting folders and files, and the user-visible
>> attributes look the same, but the entries do not get received.
>>
>>    Any ideas as to why?
>
> At first glance it looks like the form is handled by PHP using a
> relative URL.  Unless you are running a PHP compatible server locally
> (and your use of the phrase "all of the supporting folders and files"
> suggests you are not) then it can't work offline.
>
> You could try changing
>
>    mailHandlerURL:'bat/MailHandler.php'
>
> to
>
>    mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php'
>
> so the same PHP resource is used even when the pages are just local
> files.
>
   Thanks; i did not really expect a solution - i was just curious.
   Had to do some snooping on my hard drive as the wonderful search 
facility either shows too much irrelevant garbage, or shows almost nothing.
   Found that reference in forms.js so will give it a try.

[toc] | [prev] | [next] | [standalone]

#30867

>> to
>>
>> mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php'
>>
>> so the same PHP resource is used even when the pages are just local
>> files.
> Found that reference in forms.js so will give it a try.

   I give up; not critical. The form is not cleared and one thinks that 
nothing is sent.
   But anywhere from 4 to 12 identical copies are sent; quantity seems 
randumb.

[toc] | [prev] | [next] | [standalone]

#30868

Ben Bacarisse wrote:

> Robert Baer <robertbaer@localnet.com> writes:
>>   The form in my page http://www.oil4lessllc.com/index-4.html works
>> perfectly IF AND ONLY IF one is online.
>>   Copy all of the supporting folders and files, and the user-visible
>> attributes look the same, but the entries do not get received.
>>
>>   Any ideas as to why?
> 
> At first glance it looks like the form is handled by PHP using a
> relative URL.  Unless you are running a PHP compatible server locally
> (and your use of the phrase "all of the supporting folders and files"
> suggests you are not) then it can't work offline.
> 
> You could try changing
> 
>   mailHandlerURL:'bat/MailHandler.php'
> 
> to
> 
>   mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php'
> 
> so the same PHP resource is used even when the pages are just local
> files.

… *and* they are running on a local Web server.  Otherwise this is 
pointless.

However, if submission fails because the server is temporarily unavailable, 
the submit event listener should store the form data in a cookie or in local 
storage for later submission.  A session token in the data can make sure 
that ill-formed or outdated data is handled appropriately then.

> It's a shame that this is all done using client-side scripting.  You'd
> get a very much more obvious error if the form element had an action
> attribute.  Client-side scripting should really only be used to add
> features that assist the user, rather than being responsible for basic
> functionality like submitting the form.

It can be prudent to submit a form via scripting (example: see above), but 
there should be a no-script fallback.  Error messages should be conveyed to 
the user by document modification or window.alert() anyway; technical 
details can be conveyed to the developer via the script console and cross-
origin requests.

> But, as I say, first glance.  And you have hundreds of lines of script.

Not really.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#30877

   I made the suggested change and the form data gets posted.
   However, the form does not get cleared (ever).
   If online, the form in index-4.html does get cleared after a short 
wait (which i assume is the transit time).

   Like i said, no big deal - just puzzling.

[toc] | [prev] | [next] | [standalone]

#30887

Robert Baer wrote:

>    I made the suggested change and the form data gets posted.

Since you are not quoting what you are referring to, I do not know what you 
mean by “suggested change”.  Please read the FAQ on quoting.

>    However, the form does not get cleared (ever).
>    If online, the form in index-4.html does get cleared after a short
> wait (which i assume is the transit time).

The form is cleared if it is submitted classically, the server does not 
respond with status 204 “No Content”, and it does not respond with a filled-
in form, in a time span so short that you cannot see the difference, either.

It is also cleared if the script says it is to be cleared after its data is 
submitted non-classically, with XMLHttpRequest or (as Michael Haufe pointed 
out to me on Twitter), with the WHATWG Fetch API (currently experimental) 
[1], and there is no client-side script error before.

Use debugging (again, see the FAQ) to find out what happens.
“Does not work” is not a problem description.

BTW, the English pronoun, “I”, is *always* written with a capital letter.

_________
[1] <https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API>
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#30924

Thomas 'PointedEars' Lahn wrote:
> Robert Baer wrote:
>
>>     I made the suggested change and the form data gets posted.
>
> Since you are not quoting what you are referring to, I do not know what you
> mean by “suggested change”.  Please read the FAQ on quoting.
>
>>     However, the form does not get cleared (ever).
>>     If online, the form in index-4.html does get cleared after a short
>> wait (which i assume is the transit time).
>
> The form is cleared if it is submitted classically, the server does not
> respond with status 204 “No Content”, and it does not respond with a filled-
> in form, in a time span so short that you cannot see the difference, either.
>
> It is also cleared if the script says it is to be cleared after its data is
> submitted non-classically, with XMLHttpRequest or (as Michael Haufe pointed
> out to me on Twitter), with the WHATWG Fetch API (currently experimental)
> [1], and there is no client-side script error before.
>
> Use debugging (again, see the FAQ) to find out what happens.
> “Does not work” is not a problem description.
>
> BTW, the English pronoun, “I”, is *always* written with a capital letter.
>
> _________
> [1]<https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API>
   Copy from page with form (which has 168 total lines):

       <form id="contact-form">
       <div class="success"> Contact form submitted!<br> <strong>We will 
be in touch soon.</strong></div>
       <fieldset>
        <label class="name">
         <input type="text" value="Name:">
         <span class="error">*This is not a valid name.</span>
         <span class="empty">*This field is required.</span>
         <span class="clear"></span>
        </label>
        <label class="email">
         <input type="text" value="E-mail:">
         <span class="error">*This is not a valid email address.</span>
         <span class="empty">*This field is required.</span>
         <span class="clear"></span>
        </label>
        <label class="phone">
         <input type="text" value="Phone:">
         <span class="error">*This is not a valid phone number.</span>
         <span class="empty">*This field is required.</span>
         <span class="clear"></span>
        </label>
        <label class="message">
         <textarea>Message:</textarea>
         <span class="error">*The message is too short.</span>
         <span class="empty">*This field is required.</span>
         <span class="clear"></span>
        </label>
        <div class="buttons"><span><a class="button" 
data-type="reset">Clear</a></span>
               <span><a class="button" 
data-type="submit">Submit</a></span></div>
       </fieldset>
      </form>

   Added--------------vvvvvvvvvvvvvvvvvvvvvvvvvvv
      mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php',
   Above from local ..js/forms.js; note added URL is not present for the
online website.

   In both cases, online website, or using local hard drive copy, when
'Submit' button is clicked, the form data is sent.
   That added info was required to make it work from the local hard drive.

   BUT, like I said, the form is not cleared when working local. That is 
why I saw 2-4 copies of the data in our e-mail inbox; I had clicked the 
button exactly that many times.
   Also I do not care about that difference or why.

[toc] | [prev] | [next] | [standalone]

#30969

Robert Baer wrote:

>    Copy from page with form (which has 168 total lines):
> 
>        <form id="contact-form">
>        […]
>         <div class="buttons"><span><a class="button"
> data-type="reset">Clear</a></span>
>                <span><a class="button"
> data-type="submit">Submit</a></span></div>
>        </fieldset>
>       </form>
> 
>    Added--------------vvvvvvvvvvvvvvvvvvvvvvvvvvv
>       mailHandlerURL:'http://www.oil4lessllc.com/bat/MailHandler.php',
>    Above from local ..js/forms.js; note added URL is not present for the
> online website.
> 
>    In both cases, online website, or using local hard drive copy, when
> 'Submit' button is clicked, the form data is sent.

As posted, it is not a submit button, which is why this does not work 
without client-side scripting.  Bad idea.

However, the document tree can look different than the original markup.
See e.g. the “Elements” tab in Chrome Dev Tools for the former.

>    That added info was required to make it work from the local hard drive.

Then it is probably adding an “action” attribute to the form and calls the 
form’s submit() method.  Because there is no indication that this site 
supports CORS, and without CORS you cannot do XHR across origins.  (A cross- 
origin GET request without that would still be possible e.g. as JSONP, but 
that is not recommended here because of the browser’s URI length limit.)
 
>    BUT, like I said, the form is not cleared when working local. That is
> why I saw 2-4 copies of the data in our e-mail inbox; I had clicked the
> button exactly that many times.
>    Also I do not care about that difference or why.

Why should I care about your problems then?

And will you *please* trim your quotes to the *relevant* parts?

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web