5 ms·

Don’t name your input elements ‘action’ or ‘submit’

56 points by joezimjs 12y ago

joekrill 12y ago
I had to read that first paragraph about 5 times, and I'm still not sure what I read. There's at least one word missing, among other things.
- prezjordan 12y ago
  > to make your simpler Make your (code|life|waffles) simpler?
  - joezimjs 12y ago
    Thanks guys. As soon as I get my hosting back up, I'll get it fixed.
dm2 12y ago
You should always prepend variables, IDs, and classes with something unique to the project or page you're working on, it's just good practice. I've even used my initials on occasion. I normally do a short acronym for my project followed by an underscore for these types of things. Look at Google's search form, many of their IDs and classes are prepended with "gs_" and others are named something sufficiently unique so that they won't be accidentally repeated or overwritten. Also, reserved words: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... http://dev.mysql.com/doc/mysqld-version-reference/en/mysqld-version-reference-reservedwords-5-5.html http://dev.mysql.com/doc/mysqld-version-reference/en/mysqld-... http://php.net/manual/en/reserved.keywords.php http://php.net/manual/en/reserved.keywords.php http://www.php.net/manual/en/reserved.variables.php http://www.php.net/manual/en/reserved.variables.php
- stronglikedan 12y ago
  I like to prefix the element name with the entity name that will be written to. That way, if I have a form that will be writing to the attributes of multiple entities, I know exactly what each represents. If two entities share an attribute name, then the element names will be distinct. For instance, if I have a UI where the user can enter order details and add order lines, then the elements that represent order attributes are prefixed with "order-" and the others are prefixed with "orderLine-". It is tremendously helpful during maintenance.
  - dm2 12y ago
    Yep, that too. "dm2_register_form_name_input" for example. You could probably mix upper/lowercase to format it better but for some reason I don't like to mix them, just personal preference. I avoid dashes because the text editor I use doesn't select them as a whole word when I double click them.
    - stronglikedan 12y ago
      Oops, I didn't mean to type "orderLine" in camel case. I usually use underscores in the entity and attribute names, and separate them with a dash, like "order_line-item_sku". That way, I can distinctly select the entity or attribute, or easily search for all attributes for a given entity, like "order_line-".
- web007 12y ago
  I've had something like this bite me before. Back in ~2008 one of the browsers introduced support for a new attribute keyword for some HTML element (Maybe "autocomplete"? I wish I could remember.). Since there wasn't one of those defined before, we expando'd it and used the attribute to hook up our functions. When it started to mean something to the browser, it tried to interpret our attribute and freaked out. It took a while to figure out that it was a new feature, but from then on we prefixed $COMPANYNAME_ for all of our attributes.
JoshTriplett 12y ago
This seems like a basic namespacing bug in the Javascript DOM: forms should never have allowed input elements to shadow the built-in methods of the form object.
vivin 12y ago
I ran into this issue a few weeks ago as well. It's a horrible legacy feature that still exists. It's actually even worse. If you have any form elements that are also named after an internal property of the form object, then that input will shadow the native property. The only way to access it is to clone the form (without children) and then access that property. I asked a question on stackoverflow about it: http://stackoverflow.com/questions/22942689/form-elements-with-a-name-attribute-that-is-the-same-as-a-form-property-shadow http://stackoverflow.com/questions/22942689/form-elements-wi...
imjustabill 12y ago
I attended a talk on UI design for devs a few months ago. The presenter asked us: "Do any of you run an S&M website? No? Then your buttons shouldn't say submit!"
- joezimjs 12y ago
  That's not exactly on topic. We're talking about the `id` and `name` attributes, not the actual text on the button.
danielweber 12y ago
It's down. Anyone have a mirror?
- joezimjs 12y ago
  Sorry guys. I didn't expect this to be such a big story. It's been a LONG time since I hit big on Hacker News.
bcardarella 12y ago
Don't put your websites on Hosting Gator
- joezimjs 12y ago
  Can't really afford a better host right now. On days like this though, I'm definitely seeing that I need something that can handle more traffic
  - flexd 12y ago
    How much are you paying for that on Hostgator?
  - eropple 12y ago
    You might be able to. A $5 droplet on DO, configured correctly, should be able to handle a Hacker Newsering. =) The cache plugins for WP are really good these days.
    - joezimjs 12y ago
      I'm using Cloudflare and Quick Cache, but doesn't seem to help enough. The HostGator support guys recommended switching to WP Super Cache. What's DO?
      - endianswap 12y ago
        DigitalOcean, a VPS provider.
      - syvolt 12y ago
        DigitalOcean, it's not shared hosting and therefore harder to configure, that being said it's definitely worth it. I've found that even on a low-end VPS you can juice it for more than you could with a high-end shared hosting account.
      - user24 12y ago
        I use WP Super Cache, it's seen me safely through HN frontpages, popular reddit submissions and being linked from xkcd's blog.
mantrax5 12y ago
The interesting thing is I have "action" and "submit" name inputs in every single form I've ever coded. And I also .submit() forms via JS. And I never had this issue...
- yahelc 12y ago
  Very easy to replicate: With id="submit", throws a "object is not a function" error. http://jsfiddle.net/nbkHs/ http://jsfiddle.net/nbkHs/ Without, submits just fine: http://jsfiddle.net/B8CV2/1/ http://jsfiddle.net/B8CV2/1/
  - mantrax5 12y ago
    The difference between id and name is significant. The article makes it feel as if it's all the same. I don't use such ids, but I use such names. The default name of an input type=submit button is, in fact, "submit".
zorbo 12y ago
Mirror / Google cached version: http://goo.gl/UAzttI http://goo.gl/UAzttI
- lucb1e 12y ago
  Heh, Wordpress. That's what I meant: https://news.ycombinator.com/item?id=7701035 https://news.ycombinator.com/item?id=7701035
  - zorbo 12y ago
    If you got 0.3 req/s from wordpress, there was probably something wrong with your configuration or system. I run wordpress on absolutely ancient hardware via Apache SuPHP. It basically does a sudo + CGI-like exec per request. It still manages to squeeze out about 20 req/s. Above setup was enough to withstand being at the frontpage of Hacker news. I'm guessing this website's problem is more related to Hostgator or whatever he's hosting it on. Perhaps a badly configured database backend.
- joezimjs 12y ago
  Thanks
lubujackson 12y ago
Here is my JQuery-based solution that I came up with a while ago for Nuggety.com: $('<input type="submit" style="display:none;">').appendTo("#form").trigger('click'); $("#form" input:last-child").remove(); It adds a second submit button to the form and clicks it, then removes the button. Probably a better way to do this, but it works.
- joezimjs 12y ago
  Certainly an interesting workaround.
ademarre 12y ago
I suppose another incarnation of this problem, albeit less likely to occur in the wild, is to use an input name that is also the id of a different input in the same form.
fvox13 12y ago
How about "don't submit your form with Javascript" ?
user24 12y ago
Solution: form.elements['submit']
- user24 12y ago
  Ah I misread the problem, my bad. Explanation rather than (or in addition to) downvoting would have been appreciated though.
cryowaffle 12y ago
I ran into this gotcha 6-7 years ago when inheriting work on a shopping cart system. It took me at least a full day of debugging. I have used "submitBtn" as a name ever since.
- toconnor 12y ago
  I was just discussing this with a coworker this week. We had run into it about 13 years ago on IE 5.5.
dmethvin 12y ago
Scan your pages with this, at least your static HTML pages: http://kangax.github.io/domlint/ http://kangax.github.io/domlint/

56 points by joezimjs 12y ago

I had to read that first paragraph about 5 times, and I'm still not sure what I read. There's at least one word missing, among other things.

prezjordan 12y ago
> to make your simpler Make your (code|life|waffles) simpler?
- joezimjs 12y ago
  Thanks guys. As soon as I get my hosting back up, I'll get it fixed.

dm2 12y ago

You should always prepend variables, IDs, and classes with something unique to the project or page you're working on, it's just good practice. I've even used my initials on occasion. I normally do a short acronym for my project followed by an underscore for these types of things. Look at Google's search form, many of their IDs and classes are prepended with "gs_" and others are named something sufficiently unique so that they won't be accidentally repeated or overwritten. Also, reserved words: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... http://dev.mysql.com/doc/mysqld-version-reference/en/mysqld-version-reference-reservedwords-5-5.html http://dev.mysql.com/doc/mysqld-version-reference/en/mysqld-... http://php.net/manual/en/reserved.keywords.php http://php.net/manual/en/reserved.keywords.php http://www.php.net/manual/en/reserved.variables.php http://www.php.net/manual/en/reserved.variables.php

stronglikedan 12y ago
I like to prefix the element name with the entity name that will be written to. That way, if I have a form that will be writing to the attributes of multiple entities, I know exactly what each represents. If two entities share an attribute name, then the element names will be distinct. For instance, if I have a UI where the user can enter order details and add order lines, then the elements that represent order attributes are prefixed with "order-" and the others are prefixed with "orderLine-". It is tremendously helpful during maintenance.
- dm2 12y ago
  Yep, that too. "dm2_register_form_name_input" for example. You could probably mix upper/lowercase to format it better but for some reason I don't like to mix them, just personal preference. I avoid dashes because the text editor I use doesn't select them as a whole word when I double click them.
  - stronglikedan 12y ago
    Oops, I didn't mean to type "orderLine" in camel case. I usually use underscores in the entity and attribute names, and separate them with a dash, like "order_line-item_sku". That way, I can distinctly select the entity or attribute, or easily search for all attributes for a given entity, like "order_line-".
web007 12y ago
I've had something like this bite me before. Back in ~2008 one of the browsers introduced support for a new attribute keyword for some HTML element (Maybe "autocomplete"? I wish I could remember.). Since there wasn't one of those defined before, we expando'd it and used the attribute to hook up our functions. When it started to mean something to the browser, it tried to interpret our attribute and freaked out. It took a while to figure out that it was a new feature, but from then on we prefixed $COMPANYNAME_ for all of our attributes.

JoshTriplett 12y ago

This seems like a basic namespacing bug in the Javascript DOM: forms should never have allowed input elements to shadow the built-in methods of the form object.

vivin 12y ago

I ran into this issue a few weeks ago as well. It's a horrible legacy feature that still exists. It's actually even worse. If you have any form elements that are also named after an internal property of the form object, then that input will shadow the native property. The only way to access it is to clone the form (without children) and then access that property. I asked a question on stackoverflow about it: http://stackoverflow.com/questions/22942689/form-elements-with-a-name-attribute-that-is-the-same-as-a-form-property-shadow http://stackoverflow.com/questions/22942689/form-elements-wi...

imjustabill 12y ago

I attended a talk on UI design for devs a few months ago. The presenter asked us: "Do any of you run an S&M website? No? Then your buttons shouldn't say submit!"

joezimjs 12y ago
That's not exactly on topic. We're talking about the `id` and `name` attributes, not the actual text on the button.

danielweber 12y ago

It's down. Anyone have a mirror?

joezimjs 12y ago
Sorry guys. I didn't expect this to be such a big story. It's been a LONG time since I hit big on Hacker News.

bcardarella 12y ago

Don't put your websites on Hosting Gator

joezimjs 12y ago
Can't really afford a better host right now. On days like this though, I'm definitely seeing that I need something that can handle more traffic
- flexd 12y ago
  How much are you paying for that on Hostgator?
- eropple 12y ago
  You might be able to. A $5 droplet on DO, configured correctly, should be able to handle a Hacker Newsering. =) The cache plugins for WP are really good these days.
  - joezimjs 12y ago
    I'm using Cloudflare and Quick Cache, but doesn't seem to help enough. The HostGator support guys recommended switching to WP Super Cache. What's DO?
    - endianswap 12y ago
      DigitalOcean, a VPS provider.
    - syvolt 12y ago
      DigitalOcean, it's not shared hosting and therefore harder to configure, that being said it's definitely worth it. I've found that even on a low-end VPS you can juice it for more than you could with a high-end shared hosting account.
    - user24 12y ago
      I use WP Super Cache, it's seen me safely through HN frontpages, popular reddit submissions and being linked from xkcd's blog.

mantrax5 12y ago

The interesting thing is I have "action" and "submit" name inputs in every single form I've ever coded. And I also .submit() forms via JS. And I never had this issue...

yahelc 12y ago
Very easy to replicate: With id="submit", throws a "object is not a function" error. http://jsfiddle.net/nbkHs/ http://jsfiddle.net/nbkHs/ Without, submits just fine: http://jsfiddle.net/B8CV2/1/ http://jsfiddle.net/B8CV2/1/
- mantrax5 12y ago
  The difference between id and name is significant. The article makes it feel as if it's all the same. I don't use such ids, but I use such names. The default name of an input type=submit button is, in fact, "submit".

zorbo 12y ago

Mirror / Google cached version: http://goo.gl/UAzttI http://goo.gl/UAzttI

lucb1e 12y ago
Heh, Wordpress. That's what I meant: https://news.ycombinator.com/item?id=7701035 https://news.ycombinator.com/item?id=7701035
- zorbo 12y ago
  If you got 0.3 req/s from wordpress, there was probably something wrong with your configuration or system. I run wordpress on absolutely ancient hardware via Apache SuPHP. It basically does a sudo + CGI-like exec per request. It still manages to squeeze out about 20 req/s. Above setup was enough to withstand being at the frontpage of Hacker news. I'm guessing this website's problem is more related to Hostgator or whatever he's hosting it on. Perhaps a badly configured database backend.
joezimjs 12y ago
Thanks

lubujackson 12y ago

Here is my JQuery-based solution that I came up with a while ago for Nuggety.com: $('<input type="submit" style="display:none;">').appendTo("#form").trigger('click'); $("#form" input:last-child").remove(); It adds a second submit button to the form and clicks it, then removes the button. Probably a better way to do this, but it works.

joezimjs 12y ago
Certainly an interesting workaround.

ademarre 12y ago

I suppose another incarnation of this problem, albeit less likely to occur in the wild, is to use an input name that is also the id of a different input in the same form.

fvox13 12y ago

How about "don't submit your form with Javascript" ?

user24 12y ago

Solution: form.elements['submit']

user24 12y ago
Ah I misread the problem, my bad. Explanation rather than (or in addition to) downvoting would have been appreciated though.

cryowaffle 12y ago

I ran into this gotcha 6-7 years ago when inheriting work on a shopping cart system. It took me at least a full day of debugging. I have used "submitBtn" as a name ever since.

toconnor 12y ago
I was just discussing this with a coworker this week. We had run into it about 13 years ago on IE 5.5.

dmethvin 12y ago

Scan your pages with this, at least your static HTML pages: http://kangax.github.io/domlint/ http://kangax.github.io/domlint/