Dynamic form submission using javascript - how neat code?
Here's the problem:
My page displays a set of items. Each element has a checkbox associated with it (which is part of the form). The user can check any of these checkboxes and click the Delete button. The same page also has a Download button that will download the Excel sheet. At this point, my form action sounds to say "xyzAction" and I have two different handlers (similar to Struts Action) - one for removing stores and the other for loading stores.
I am told that the best way to do this is to rely on javascript by doing one of the following: 1)) Switching the action form when the download and delete buttons are pressed - there by calling different actions. 2) Use the hidden variable "act" to set it to delete / unload and submit in one form. Server side actions will take care of identifying the action and forwarding the appropriate action.
Approach (1) - seems very illogical to me. Playing with the action of the form seems unnecessary. Approach (2) - clearly doesn't work if your javascript is disabled and not very elegant.
There must be a third way to do this? What will make me happy?
a source to share
First you need to get the HTML code.
You have two different actions, so you must have two forms. A good rule of thumb is that there should only be one submit button per form. This is best practice for HTML and ensures that the page works without JS or other tricks.
After the page works like this, use JS to manipulate the DOM to create the UI you want. This is using JS to add UI and is best practice for unobtrusive JS.
(If you really want to configure your actions in one form, changing the form action with JS is the best course of action. But consider what happens if the user checks the checkbox and then changes their mind and uploads the file, leaving the checkbox checked. You must take care about not deleting anything.)
a source to share