Don’t name your input elements ‘action’ or ‘submit’ | Hacker News Reader

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

joezimjs.com

56 pointsjoezimjs37 comments

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/Refe...

http://dev.mysql.com/doc/mysqld-version-reference/en/mysqld-...

http://php.net/manual/en/reserved.keywords.php

http://www.php.net/manual/en/reserved.variables.php

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.

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.

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-".

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.

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-wi...

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

Heh, Wordpress. That's what I meant: https://news.ycombinator.com/item?id=7701035

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.

Thanks

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!"

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

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.

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.

> to make your simpler

Make your (code|life|waffles) simpler?

Thanks guys. As soon as I get my hosting back up, I'll get it fixed.

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.

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

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

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

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.

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.

Certainly an interesting workaround.

It's down. Anyone have a mirror?

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.

Don't put your websites on Hosting Gator

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

How much are you paying for that on Hostgator?

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.

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?

DigitalOcean, a VPS provider.

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.

I use WP Super Cache, it's seen me safely through HN frontpages, popular reddit submissions and being linked from xkcd's blog.

Solution: form.elements['submit']

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

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...

Very easy to replicate:

With id="submit", throws a "object is not a function" error. http://jsfiddle.net/nbkHs/

Without, submits just fine: http://jsfiddle.net/B8CV2/1/

Reply on news.ycombinator.com