• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

What happens when you click an HTML submit button?

 
Ryan McClain
Ranch Hand
Posts: 145
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What happens when you click a submit button on an HTML form?
How about without a form?

What happens first? What actions does the browser take then?
I can guess from my experience that the first thing the browser does is call the action= attribute from the form tag.
Then it will simply send a GET request to the server if the action= attribute is missing or it will send a POST if it is explicitly defined.

What if there is no server to answer this GET request? I haven't tried it out yet. I'm just trying to figure out the specific internal mechanics.
What if there is no form and the button stands on its own? What is it going to do with the button? What is the course of action? A flowchart scenario, if you will.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Invalid HTML can act in an indeterminate manner. So a submit button outside of a form isn't likely to do anything useful.

Try submitting the form to a non-ecistant server and see what happens.

And, a submit event is triggered when the button is inside a form and clicked. It is this event that eventually causes the form element to submit itself to its action.
 
Ryan McClain
Ranch Hand
Posts: 145
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well, the HTML was not invalid as far as I can gather. It may not be W3C compliant, but it still works I presume.
Submitting the form to a non-existent server would just render a 404 response as usual, I suppose.

Here is the code:


I just talked to someone about it and he told me this:

"Upon clicking the submit button:

It calls any attached javascript handlers, then any button class handlers, and then the submit form handler.
All button class objects have built in methods. Look at the DOM specification."

So, I gather that internally the browser is triggering DOM events and handling them behind the scenes. Is there any way I could capture these events in action?
Meanwhile I'm checking out the DOM specification on <input type=button>.


 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ryan McClain wrote:Well, the HTML was not invalid as far as I can gather. It may not be W3C compliant

Not W3C compliant == invalid

Submitting the form to a non-existent server would just render a 404 response as usual, I suppose.

Easy enough to find out.

It calls any attached javascript handlers, then any button class handlers, and then the submit form handler.

As I said, it triggers a submit event. The order of handler invocations is according to the DOM hierarchy and whatever handlers are actually established. So no, it doesn't call all of one "type" of handler first, then the other.

And remember, not all element types can accept all types of handlers.

A good way to see handlers in action is like an example I wrote in chapter 4 of jQuery in Action. Establish a submit handler on all elements ($('*').submit(function(){ ... });), put some diagnostic code in the handler, and let it rip.

All button class objects have built in methods. Look at the DOM specification.

All elements have builtin methods. I'm not sure what he was trying to get at with that.

Is there any way I could capture these events in action?

See above.
 
Ryan McClain
Ranch Hand
Posts: 145
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What do you mean invalid? I can perfectly create an HTML page that's not W3C compliant and it will still work in most browsers, even without quirks mode.
Millions of webpages are invalid and they still serve the public and no one has problems viewing them.

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64958
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ryan McClain wrote:What do you mean invalid? I can perfectly create an HTML page that's not W3C compliant and it will still work in most browsers

Browsers are notoriously lenient with invalid HTML. That doesn't make it valid. If it's not compliant, it's not valid.

"Doesn't blow up in the browser" or even "seems to work ok" is not any measure of validity.

Millions of webpages are invalid and they still serve the public and no one has problems viewing them.

Except when weird things start happening. Making sure that your HTML is valid is the first step in any debugging effort.
 
Rob Crowther
author
Ranch Hand
Posts: 297
5
Android Fedora Firefox Browser
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Here is the complete form submission algorithm, though if you're trying to solve a specific problem rather than just learn background information then I suggest you tell us what your problem is.

Millions of webpages are invalid and they still serve the public and no one has problems viewing them.


Really? No one? There are 2.4 billion web users, have you checked with all of them? ;)

If your page isn't working as you expect and your page is invalid then, as Bear says, your first step is to find out if that invalid markup is what's causing the problem.
 
Ryan McClain
Ranch Hand
Posts: 145
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, I checked all of them, including your machine.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic