Safest way to make sure a HTML button does not send any information to the server

Question

I'm working on a javascript app that has a form with a button that processes inputs in the browser. It is important that the data never accidentally get sent to the server when the button is pushed. Situations where this might happen is the browser may not have javascript enabled or the DOM implementation may have a bug where the click binding on the button is lost briefly (I've seen this happen once in testing but not in a way that is reproducible).

The obvious way to do this seems to be to not have a button or a submit but some other structure which I would style to look like a button. Are there better ideas? Is there anything like a form attribute that disables data being sent from the form -- and is well implemented across browsers?

Thanks

Answer 1

Surely some kind of image button would do? Style up a nice looking image, and use an onclick event to post back? Would certainly solve the JavaScript disabled problem.

Answer 2

<input type="button">

does not submit a form, unlike

<input type="submit">

Answer 3

Try using an <input type="button"> that's not in the form. That way, even if the button is clicked, and even if the browser does somehow erroneously think that it should be submitting something, it will have no idea where to send the data for processing because there's no action attribute associated to the button.

Alternatively, you could look at this question regarding imageless CSS buttons used in Gmail.

Answer 4

Try creating just a button:

<input type="button" value="some text">

You can use onclick= handler to process the data.

If you want to do fancier non-input buttons, check out what gmail does: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html

Answer 5

You're allowed to have buttons and inputs outside of a <form>, and in that case there's no possible way anything can be submitted to the server.