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


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

the right "form" element for ajax

Started byamado.alves@gmail.com
First post2012-11-06 08:19 -0800
Last post2012-11-06 20:23 -0800
Articles 6 — 4 participants

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


Contents

  the right "form" element for ajax amado.alves@gmail.com - 2012-11-06 08:19 -0800
    Re: the right "form" element for ajax Tim Streater <timstreater@greenbee.net> - 2012-11-06 17:08 +0000
    Re: the right "form" element for ajax Martin Leese <please@see.Web.for.e-mail.INVALID> - 2012-11-06 11:02 -0700
      Re: the right "form" element for ajax amado.alves@gmail.com - 2012-11-06 14:35 -0800
      Re: the right "form" element for ajax Tim Streater <timstreater@greenbee.net> - 2012-11-06 22:52 +0000
    Re: the right "form" element for ajax RobG <rgqld@iinet.net.au> - 2012-11-06 20:23 -0800

#17051 — the right "form" element for ajax

Fromamado.alves@gmail.com
Date2012-11-06 08:19 -0800
Subjectthe right "form" element for ajax
Message-ID<015e6c83-d721-441b-8e07-5393238fe005@googlegroups.com>
A recurring issue I see but could not find a definitive answer.

When we send user data via AJAX the attribute "action" of the HTML element "form" is useless and even looks like it can get in the way. Usually we call the send data function right from the "onclick" event of a "button" element, and use the getElement functions to fetch the user input. There's no "action" in the "form". Actually we don't even need the "form" element at all. But per the HTML reference the "form" element is required and its "action" attribute too (or isn't it?)

Some browsers accept "input" fields and "button" elements without being enclosed in any "form" element. And accept "form" elements without the "action" attribute. But, strictly, this is illegal, right?

So, the issue is: what we do? Rely on the permissive behavior of browsers, or write legal HTML and pray it does not interfere with our ajax? I see the Gmail interface has "form" elements with an empty "action" attribute. Would that be the "best practice"?

Thanks.

[toc] | [next] | [standalone]


#17052

FromTim Streater <timstreater@greenbee.net>
Date2012-11-06 17:08 +0000
Message-ID<timstreater-CCC9BA.17081306112012@news.individual.net>
In reply to#17051
In article <015e6c83-d721-441b-8e07-5393238fe005@googlegroups.com>,
 amado.alves@gmail.com wrote:

> A recurring issue I see but could not find a definitive answer.
> 
> When we send user data via AJAX the attribute "action" of the HTML element 
> "form" is useless and even looks like it can get in the way. Usually we call 
> the send data function right from the "onclick" event of a "button" element, 
> and use the getElement functions to fetch the user input. There's no "action" 
> in the "form". Actually we don't even need the "form" element at all. But per 
> the HTML reference the "form" element is required and its "action" attribute 
> too (or isn't it?)

Certainly none of the forms in my app ever gets submitted. I have a 
feeling (but could be wrong), that in HTML5 you can omit the form 
altogether. You could ask on alt.html, f'rinstance.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

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


#17053

FromMartin Leese <please@see.Web.for.e-mail.INVALID>
Date2012-11-06 11:02 -0700
Message-ID<k7bjbu$ref$1@dont-email.me>
In reply to#17051
amado.alves@gmail.com wrote:
> A recurring issue I see but could not find a definitive answer.
> 
> When we send user data via AJAX the attribute "action" of the HTML element "form" is useless and even looks like it can get in the way. Usually we call the send data function right from the "onclick" event of a "button" element, and use the getElement functions to fetch the user input. There's no "action" in the "form". Actually we don't even need the "form" element at all. But per the HTML reference the "form" element is required and its "action" attribute too (or isn't it?)

<form> tags and AJAX are quite separate;
each can occur without the other.

> Some browsers accept "input" fields and "button" elements without being enclosed in any "form" element. And accept "form" elements without the "action" attribute. But, strictly, this is illegal, right?

A <button> or <input> tag outside of a
<form> container is allowed.  If you have a
<form> tag then it needs an action attribute.
(Under HTML 4.01, a value other than an HTTP
URI is undefined.  Under HTML 5, an empty
URL is not allowed.)

> So, the issue is: what we do? Rely on the permissive behavior of browsers, or write legal HTML and pray it does not interfere with our ajax? I see the Gmail interface has "form" elements with an empty "action" attribute. Would that be the "best practice"?

No, an empty action attribute would not be
best.

-- 
Regards,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

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


#17058

Fromamado.alves@gmail.com
Date2012-11-06 14:35 -0800
Message-ID<61ee66c0-6749-4c1e-922a-52c9b7662b82@googlegroups.com>
In reply to#17053
> A <button> or <input> tag outside of a
> <form> container is allowed. (Leese)

That's the clean solution then, no <form>.
Thanks a lot.

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


#17059

FromTim Streater <timstreater@greenbee.net>
Date2012-11-06 22:52 +0000
Message-ID<timstreater-1BCAF7.22523106112012@news.individual.net>
In reply to#17053
In article <k7bjbu$ref$1@dont-email.me>,
 Martin Leese <please@see.Web.for.e-mail.INVALID> wrote:

> amado.alves@gmail.com wrote:
> > A recurring issue I see but could not find a definitive answer.
> > 
> > When we send user data via AJAX the attribute "action" of the HTML element 
> > "form" is useless and even looks like it can get in the way. Usually we 
> > call the send data function right from the "onclick" event of a "button" 
> > element, and use the getElement functions to fetch the user input. There's 
> > no "action" in the "form". Actually we don't even need the "form" element 
> > at all. But per the HTML reference the "form" element is required and its 
> > "action" attribute too (or isn't it?)
> 
> <form> tags and AJAX are quite separate;
> each can occur without the other.

This is not the point at issue.

-- 
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

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


#17062

FromRobG <rgqld@iinet.net.au>
Date2012-11-06 20:23 -0800
Message-ID<299f4f19-8e31-40b7-bb11-85f583f17e57@googlegroups.com>
In reply to#17051
On Wednesday, November 7, 2012 2:19:38 AM UTC+10, amado...@gmail.com wrote:
[...]
> When we send user data via AJAX the attribute "action" of the HTML 
> element "form" is useless and even looks like it can get in the way.
> Usually we call the send data function right from the "onclick" event
> of a "button" element, and use the getElement functions to fetch the
> user input. There's no "action" in the "form". Actually we don't even
> need the "form" element at all. But per the HTML reference

Which reference? There is the W3C HTML 4.01 standard and the various HTML5 specifications (various W3C drafts and WHATWG "HTML Living Standard").


> the "form" element is required

No, it is not. Various elements can be used as form controls in a form, but they are not constrained to always be in a form (in which case they are just plain elements, not form controls). 

e.g. in HTML5, an input element is "phrasing content" and can appear anywhere such content is allowed, just like A, SPAN, STRONG and similar elements.

Forms are convenient for other reasons. For example, in a function called as a listener on a form control, *this* will reference the element and *this.form* will reference the form it's in. Other form controls can then be conveniently referenced as *form.controlName*, rather than *document.getElementById* or similar.

Forms also create a logical grouping of elements, similar to a div.

> and its "action" attribute too (or isn't it?)

It is required in HTML 4.01[1], but not in HTML5[2].

However, a robust strategy is to have the form work without scripting, then add scripting to improve the user experience. 

You should run your script from the form's submit listener. If it completes sucessfully, it can cancel submit and do the AJAX thing. If it does not, it can allow the form to submit. 

If the form doesn't submit, there is no reason that the action attribute should interfere with anything.


> Some browsers accept "input" fields and "button" elements without
> being enclosed in any "form" element.

Per HTML 4.01 and HTML5

> And accept "form" elements without the "action" attribute. But,
> strictly, this is illegal, right?

Not "illegal" but "invalid". It's a good idea to have valid markup, however in some cases the consequences of invalid markup are well known and insignificant. Not having an action attribute is only an issue in a case where one is required (e.g. where the form should be submitted). 


> So, the issue is: what we do? Rely on the permissive behavior of
> browsers, or write legal HTML and [hope] it does not interfere with
> our ajax?

There is no reason for the action attribute to not have a valid value (see above), or for it to interfere with an XMLHttpRequest (or whatever mechnaism you are using for AJAX) since you can cancel the form's submit if required.

> I see the Gmail interface has "form" elements with an empty "action"
> attribute. Would that be the "best practice"?

In HTML5, the action attribute isn't mandatory. In HTML 4 and 5 (if there is an action attribute), an empty value is invalid.

I expect you should just omit the attribute and use <!DOCTYPE html> so that invalidity isn't an issue (in this case).


1. http://www.w3.org/TR/REC-html40/interact/forms.html#edef-FORM
2. http://dev.w3.org/html5/spec/single-page.html#attr-fs-action


-- 
Rob

[toc] | [prev] | [standalone]


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


csiph-web