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

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

Submitting a Form that has Control Events

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

Contents

  Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-22 21:03 -0800
    Re: Submitting a Form that has Control Events Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-23 12:52 +0000
      Re: Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-23 10:36 -0800
        Re: Submitting a Form that has Control Events Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-23 23:41 +0000
          Re: Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-23 16:48 -0800
          Re: Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-23 17:00 -0800
            Re: Submitting a Form that has Control Events Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-24 02:22 +0000
              Re: Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-23 18:35 -0800
                Re: Submitting a Form that has Control Events Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-24 05:10 +0000
                  Re: Submitting a Form that has Control Events Gene Wirchenko <genew@ocis.net> - 2012-02-24 09:43 -0800
            Re: Submitting a Form that has Control Events Mike Duffy <Use_guestbook_page@website.in.sig> - 2012-02-24 02:22 +0000

#12078 — Submitting a Form that has Control Events

Dear JavaScripters:

     I am putting what I thought would be the final touches on the
first cut for a form handler.

     I have validation on controls and on the form as a whole.  The
control-level validations work just fine, and focus does not move off
the control.  This is what I want.

     I now need to have the submit sequence done.  Roughly, it is:
          Run validation on each data control stopping if an error and
setting the focus to the erroneous control.
          Run each form-level validation stopping if an error and
setting the focus to the first of the erroneous controls.
          The actual submit (not implemented yet).

     I click Submit and...

     Sometimes, especially if the current control is one that has a
validation rule, the function I have written for submitting does not
get run.  (If there is a control validation, the control validation
will run.)  Clicking again on the submit button will usually result in
the submit code then running.

     Note that if the form-level validation runs, it does run
correctly.  My problem is sometimes, it does not run at all.  (An
alert() at the beginning of the function does not execute.)

     This is obviously not what I want.  I have done some looking, but
I have not found anything covering this.  Part of the problem that I
am having is that I am not sure how I should be coding this.  The
simplistic form submit code that I have found is not enough.

     Could someone please post some skelton code or pointer to the
same for submitting when some processing has to be done first,
especially code that understands control events can occur?

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#12089

Gene Wirchenko <genew@ocis.net> wrote in 
news:9ghbk7hh8t3jbka7kmepejfnqng4vbjqgo@4ax.com:

> 
>      I click Submit and...

You should either give us the url of the page or its source if it is not on 
the Internet. Better yet, a skeleton of just a few lines that does not work 
as you think it should.


> Sometimes, especially if the current control is one that has a
> validation rule, the function I have written for submitting does not
> get run. 

When you say "current", do you mean the form element which currently has 
focus? Does each form element have an "onBlur" validation function applied 
to it, or just onKeypress/onClick? Did you remember to return "true" in all 
of those functions when the form values are okay?

I see that you are sumitting with the button, but some people will press 
<Enter> to submit a form regardless of the instructions on the screen. So 
you should have "onKeypress" handlers for your checkboxes and "onClick" 
handlers for your text fields, etc.

-- 
http://pages.videotron.ca/duffym/index.htm

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

#12109

On Thu, 23 Feb 2012 12:52:44 +0000 (UTC), Mike Duffy
<Use_guestbook_page@website.in.sig> wrote:

>Gene Wirchenko <genew@ocis.net> wrote in 
>news:9ghbk7hh8t3jbka7kmepejfnqng4vbjqgo@4ax.com:

>>      I click Submit and...
>
>You should either give us the url of the page or its source if it is not on 
>the Internet. Better yet, a skeleton of just a few lines that does not work 
>as you think it should.

     It is over a thousand lines, and I do not know where the error
is.  I was hoping to get a bit of guidance as to what to look for.

     I suspect some interaction of events, but that is about all I
have.

     I would like a non-trivial skeleton of a form submit, something
that accounts for events.  I can find trivial examples easily enough.
I need something more sophisticated.  I can adapt that to fit my
needs.

     I am using IE9 under Windows 7.

>> Sometimes, especially if the current control is one that has a
>> validation rule, the function I have written for submitting does not
>> get run. 
>
>When you say "current", do you mean the form element which currently has 
>focus? Does each form element have an "onBlur" validation function applied 

     Yes.

>to it, or just onKeypress/onClick? Did you remember to return "true" in all 

     onblur.  I do not use onkeypress and onclick.

>of those functions when the form values are okay?

     Yes.  Much of the code is generated, so it is make it work once
and reuse.

     As well as validation, the control-level validation also does
data cleanup (e.g. capitalisation).  The controls that also have a
validation expression are the troublesome ones IT SEEMS.

>I see that you are sumitting with the button, but some people will press 
><Enter> to submit a form regardless of the instructions on the screen. So 

     For now, I am using the button.  Why does the event not fire
reliably?

>you should have "onKeypress" handlers for your checkboxes and "onClick" 
>handlers for your text fields, etc.

     Oh, my.  Something else to worry about.  It seems it never ends.

     I would like to deal with the current problem first.

Sincerely,

Gene Wirchenko

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

#12112

Gene Wirchenko <genew@ocis.net> wrote in
news:621dk7dl90v2t97pca84jdquncbu3sk07u@4ax.com: 


> 
>      For now, I am using the button.  Why does the event not fire
> reliably?

If it is the "submit" element, perhaps the form submission is occuring 
before the onClick event can be executed. I had a similar problem (see my 
guest page on the website in the sig). I fixed it by programatically 
disabling the submit button when the page is loaded.


The disabled form and disabled button within are defined with:

<form name="contact" id="mail_form" method="post" action="">

<... Other form elements ...>

<input name="sub_mess" id="Submit_Button" type="submit" value="(Button 
Disabled)" class="button">

<... Other form elements ...>

</form>

Following line is in the body onLoad handler:

document.getElementById('Submit_Button').disabled = true; 


I use the following function enable the send button. In my case, I just 
want to pop up a message if the user hit return; anything else enables 
the send button

function armSendButton(arg)
  {
  if (arg == 13) {alert('Use the button !!!'); return false;};

  // Presumably, your form element handlers will ensure that
  // all form values are okay. Otherwise return "false" here.


  // Update button text so user knows it will work now.
  document.forms.contact.sub_mess.value="Send the Message";

  // (Change the ... to your own values.)
  // You might not be using the recipient nor redirect
  document.forms.contact.recipient.value = "...";
  document.forms.contact.redirect.value = "....";
  document.getElementById("mail_form").action = "...";

  // Enable the submit button
  document.getElementById("Submit_Button").disabled = false;
  return true;
  }


> 
>      Oh, my.  Something else to worry about.  It seems it never ends.

I made a mistake. You do not need onClick handlers for text fields, but 
you should have onKeypress for all non-text fields to handle user hitting 
Escape, Enter, or Tab. These handlers can just check for Enter (do a form 
submit), Escape (do a form reset), or a Tab (do nothing; your onBlur 
event should fire anyways.)

-- 
http://pages.videotron.ca/duffym/index.htm

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

#12117

On Thu, 23 Feb 2012 23:41:07 +0000 (UTC), Mike Duffy
<Use_guestbook_page@website.in.sig> wrote:

>Gene Wirchenko <genew@ocis.net> wrote in
>news:621dk7dl90v2t97pca84jdquncbu3sk07u@4ax.com: 

>>      For now, I am using the button.  Why does the event not fire
>> reliably?
>
>If it is the "submit" element, perhaps the form submission is occuring 
>before the onClick event can be executed. I had a similar problem (see my 
>guest page on the website in the sig). I fixed it by programatically 
>disabling the submit button when the page is loaded.

     Well, I gave it another shot.  It is now working.  I do not know
what did it.  I suspect that I missed the return in the onsubmit
clause, but it could have been a few other things.

     JavaScript can be rather unforgiving.

[snip]

>I made a mistake. You do not need onClick handlers for text fields, but 
>you should have onKeypress for all non-text fields to handle user hitting 
>Escape, Enter, or Tab. These handlers can just check for Enter (do a form 
>submit), Escape (do a form reset), or a Tab (do nothing; your onBlur 
>event should fire anyways.)

     And my users are likely to try <Return>, too.  Thank you for this
tip.

Sincerely,

Gene Wirchenko

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

#12118

On Thu, 23 Feb 2012 23:41:07 +0000 (UTC), Mike Duffy
<Use_guestbook_page@website.in.sig> wrote:

[snip]

     Having a second look at this:

>If it is the "submit" element, perhaps the form submission is occuring 
>before the onClick event can be executed. I had a similar problem (see my 
>guest page on the website in the sig). I fixed it by programatically 
>disabling the submit button when the page is loaded.

[snip]

>I use the following function enable the send button. In my case, I just 
>want to pop up a message if the user hit return; anything else enables 
>the send button
>
>function armSendButton(arg)

     Where does this function get called, please?  In the onkeypress
clause of each input control?

[snip]

>I made a mistake. You do not need onClick handlers for text fields, but 
>you should have onKeypress for all non-text fields to handle user hitting 
                                    ^^^^^^^^^^^^^^^
     Like what?  Or did a gremlin insert "non-"?  What is a non-text
field?

>Escape, Enter, or Tab. These handlers can just check for Enter (do a form 
>submit), Escape (do a form reset), or a Tab (do nothing; your onBlur 
>event should fire anyways.)

     Sorry for all the questions, but I have spent so much time on
this form, having to make so many reasonable guesses that when I have
the opportunity to not guess, I like to take it.

Sincerely,

Gene Wirchenko

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

#12119

Gene Wirchenko <genew@ocis.net> wrote in
news:5undk71pkqh9agf6ifj0ch2gad5d60hq2i@4ax.com: 

>>
>>function armSendButton(arg)
> 
>      Where does this function get called, please?  In the onkeypress
> clause of each input control?

Yes. I define the function in the head (or body before the form that uses 
it). Then I designate it as the onKeypress event for *every* text input 
control in the entire form.

In my case, I simply wanted to disable form submission until the user has  
made a change in any form element. It may seem had to believe, but I was 
getting spam from robots visiting my "guestbook" page.

Apparently, they parse the HTML in order to find all text fields (and 
fill them with urls for porn & viagra) and then execute the submit 
action. So I leave the action empty on the page initially, and then I put 
the proper action into the form at the same time as I enable the button.

> 
> [snip]
> 
>> ... you should have onKeypress for all non-text fields
>                                     ^^^^^^^^^^^^
>      Like what?  Or did a gremlin insert "non-"?  What is a non-text
> field?

I'm probably guilty of using the wrong nomenclature. By this I mean all 
form elements which are not text fields. (Radio buttons, checkboxes, 
buttons & drop-down lists) Just to handle Enter / Tab / Escape.


> Sorry for all the questions,

Don't worry about it.

-- 
http://pages.videotron.ca/duffym/index.htm

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

#12121

On Fri, 24 Feb 2012 02:22:29 +0000 (UTC), Mike Duffy
<Use_guestbook_page@website.in.sig> wrote:

>Gene Wirchenko <genew@ocis.net> wrote in
>news:5undk71pkqh9agf6ifj0ch2gad5d60hq2i@4ax.com: 

>>>function armSendButton(arg)
>> 
>>      Where does this function get called, please?  In the onkeypress
>> clause of each input control?
>
>Yes. I define the function in the head (or body before the form that uses 
>it). Then I designate it as the onKeypress event for *every* text input 
>control in the entire form.
>
>In my case, I simply wanted to disable form submission until the user has  
>made a change in any form element. It may seem had to believe, but I was 
>getting spam from robots visiting my "guestbook" page.

     <faux naive>NO!  Who would ever do that?</>

>Apparently, they parse the HTML in order to find all text fields (and 
>fill them with urls for porn & viagra) and then execute the submit 
>action. So I leave the action empty on the page initially, and then I put 
>the proper action into the form at the same time as I enable the button.

     Although I will probably take a different tack, I need to avoid
duplicate posting.  Disabling Submit is probably not going to be
enough.  I might use an id number from the database when I do so.

>> [snip]
>> 
>>> ... you should have onKeypress for all non-text fields
>>                                     ^^^^^^^^^^^^
>>      Like what?  Or did a gremlin insert "non-"?  What is a non-text
>> field?
>
>I'm probably guilty of using the wrong nomenclature. By this I mean all 
>form elements which are not text fields. (Radio buttons, checkboxes, 
>buttons & drop-down lists) Just to handle Enter / Tab / Escape.

     No, I blindsided myself.  Except for the odd button, I avoid
non-text fields myself almost reflexively.  I just did not think of
those control types.  The app that I maintain and that I will
ultimately replace with a Web version is optimised for head-down data
entry.  Mixing keying and mousing slows DE quite a bit so I stick with
textboxes, editboxes, and buttons.

>> Sorry for all the questions,
>
>Don't worry about it.

     I appreciate the help.  Man, my pay-it-forward is going to be
something fierce.

Sincerely,

Gene Wirchenko

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

#12123

Gene Wirchenko <genew@ocis.net> wrote in
news:adtdk71g73hcf3b3udjn9i4jrj96cpvklo@4ax.com: 

> 
> .. my pay-it-forward is going to be something fierce.

? ^^^^^^^^^^^^^^^^^^^^

-- 
http://pages.videotron.ca/duffym/index.htm

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

#12132

On Fri, 24 Feb 2012 05:10:24 +0000 (UTC), Mike Duffy
<Use_guestbook_page@website.in.sig> wrote:

>Gene Wirchenko <genew@ocis.net> wrote in
>news:adtdk71g73hcf3b3udjn9i4jrj96cpvklo@4ax.com: 
>
>> 
>> .. my pay-it-forward is going to be something fierce.
>
>? ^^^^^^^^^^^^^^^^^^^^

     When someone helps you in some areas (knowledge being one), you
often can not pay them back for their help (as they know more than you
do), so you pay it forward (and help someone else).

Sincerely,

Gene Wirchenko

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

#12120

Gene Wirchenko <genew@ocis.net> wrote in
news:5undk71pkqh9agf6ifj0ch2gad5d60hq2i@4ax.com: 

>>
>>function armSendButton(arg)
> 
>      Where does this function get called, please?  In the onkeypress
> clause of each input control?

Yes. I define the function in the head (or body before the form that uses 
it). Then I designate it as the onKeypress event for *every* text input 
control in the entire form.

In my case, I simply wanted to disable form submission until the user has  
made a change in any form element. It may seem had to believe, but I was 
getting spam from robots visiting my "guestbook" page.

Apparently, they parse the HTML in order to find all text fields (and fill 
them with urls for porn & viagra) and then execute the submit action. So I 
leave the action empty on the page initially, and then I put the proper 
action into the form at the same time as I enable the button.

> 
> [snip]
> 
>> ... you should have onKeypress for all non-text fields
>                                     ^^^^^^^^^^^^
>      Like what?  Or did a gremlin insert "non-"?  What is a non-text
> field?

I'm probably guilty of using the wrong nomenclature. By this I mean all 
form elements which are not text fields. (Radio buttons, checkboxes, 
buttons & drop-down lists) Just to handle Enter / Tab / Escape.


> Sorry for all the questions,

Don't worry about it.

-- 
http://pages.videotron.ca/duffym/index.htm

[toc] | [prev] | [standalone]

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

csiph-web