Html – Use input-submit to represent multiple options

formshtmlsubmit

I have a table of events on a page. Last column contains available actions, i.e. "accept", "tent. accept", "cancel".
So if you are an attendee you'll get "accept"/"tent. accept" buttons. If you are the organizer you have "Cancel" option.

Now, I have done "Cancel" as <input type='submit'... element, and put "accept"/"tent. accept" as links. That's not actually bad, but still pretty evil. I'd rather use input/submit consistently, but still keep one-click operations (i.e. I don't want to have selection-box AND a submit button).
Assume user has JS disabled.
Should I create two forms for accept/tent case? or is there a better solution?

E.g. Bob will see:

| Topic | Time | Organizer | Actions  |
| Stuff | 2:00 | Bob       | [Cancel] |

And Jane, who was invited on the same meeting, will see:

| Topic | Time | Organizer | Actions                |
| Stuff | 2:00 | Bob       | [Accept] [Tent. Accept]|

Question again is: How do I implement two buttons for Jane's choice, so that each button is still a <input type='submit'...

Best Answer

The names (and values) of your submit buttons should be available to your server-side script so that you can take different actions. Here's a full explanation: http://www.javascript-coder.com/html-form/html-form-submit.phtml

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

JavaScript post request like a form submit

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Related Topic