how to create a multi-selection <select> element that will submit-on-click

Question

I want an HTML [select] element that permits the user to make multiple selections simply by clicking (not by shift-clicking or control-clicking), AND I want the form to submit whenever they do so. I can achieve either of these behaviours, but not both. The code for the first behaviour appeared in

http://www.htmlforums.com/client-side-scripting/t-select-multiple-items-without-ctrl-117760.html

subsequently referenced on this forum at

How to choose more than one option from a select box

and I have tried but failed to adapt the code to make the form submit whilst retaining the multi-select behaviour. Essentially, wherever I embed the submit(); it inhibits the multi-select (I presume simply by being executed first). Provoking a submit via some other control retains the multi-select, so it is not posting back to the server that is losing the selections. I tried adding a line to the addSelect event

function addSelect(id)
{
  var sel = document.getElementById(id);
  addEvent(sel, 'click', whichElement);
  addEvent(sel, 'click', addRemoveClicked);
  addEvent(sel, 'click', doSubmit);
}

function doSubmit(e) {
  document.forms[0].submit();
}

The form submits but doesn't retain the multi-select behaviour.

I tried adding onchange, onclick and even onmouseout to the declaration of the [select] element, but with the same result.

I confess that I don't fully understand how the JS originally provided by Paul Nelson works, so I don't know what else to try - can anyone advise?

Answer 1

Messing with the user interface behaviors of the select element may not be the best call here. I'd suggest a different approach : use of a list of checkbox+label elements instead. You can easily adapt the ui to your need (hiding the checkbox if so desired, changing background color etc...).

Js libraries/plugins exists for such a need, checkout for example http://loudev.com/

Answer 2

I agree that's not a very good idea to mess with the "standard" or native way in which elements are handled by the browser.

That said, you can set a timeout function to trigger submitting the page once a given amount of time has passed. You can also check that the select has at least one selected element (to prevent submitting with no values).

So, each time you click the select element, a new timeout function is created (and the old one discarded).

You need to define a global variable to hold the timeout function in order to be able to abort in case a new click is made over the select element before page submits.

<script type="text/javascript">
    var timeoutObj;
</script>

And then:

function addSelect(id) {
    var sel = document.getElementById(id);
    addEvent(sel, 'click', whichElement);
    addEvent(sel, 'click', addRemoveClicked);
    addEvent(sel, 'click', doSubmitOnTimeout);
}

function doSubmitOnTimeout(e) {
    clearTimeout(timeoutObj);
    if (document.getElementById(this.id).selectedIndex > -1) {
    timeoutObj = setTimeout(function(){
        document.forms[0].submit();        
    },2000);
}

This code will submit your page 2 seconds after the last click over the select element.

Update:

I used the code you mentioned in your question to achieve multi-selection without holding down the "ctrl" key.

An alert will trigger 2 sec after your last click, only if there's something selected, showing you the indices of the items selected.

If you want to run it yourself, make sure you add the JS in between tags inside the of your test page or better yet, use a separate .js file and reference itfrom the tag.

2nd Update:

I think you are a bit confused on some of the different concepts involved in the form submission process.

Whenever you submit a form, it is send to the server (to the target specified in the action attribute) using either one of these 2 form submission methods (specified in the method attribute): GET or POST.

You can read about the difference of these two in the link I've added in the comments. As a rule of thumb though, GET is used when not a change in the state of the site is expected, for example when someone is requesting something from your site. POST is used when a user is somehow affecting the state of your site with the form (for instance, when you sign up or place an order on a website's page). IMHO, if you always go with a POST method, you cannot be wrong.

Regarding your problem, which by the way I cannot seem to fully understand yet, let me point out some notes:

1. Regardless of what server-side platform you are using (be it PHP, Java, ASP.NET or other), when you submit the form the information is sent to the server and the target page (the one in the action attribute) is loaded.

2. In the example I've provided, I'm using the same page so after the form is submitted the very same page loads. Since I'm using plain HTML + javascript (thus no server side logic), once the page re-loads, the previously selected items are lost because the page is loading "from scratch", as the first time.

3. If you wanted to preserve the state of the selected options after page reloads, you need to do that by doing some server-side programming. Something as explained here should get it done if you are using PHP.

Now, once you've worked out part 3, you should be able to have your page reload after the form is submitted and the items you had selected before submitting the form should then be preserved. At this point, if you want to modify the list of selected items, you still need to update the javascript code in the sample page to allow it to keep track of items that are pre-selected (or selected by default if you will) when the page loads.

I've updated the example to contemplate just that. Here's the link to the new example: http://jsfiddle.net/WZ2BZ/1/ .

I've set this up so that 'option 2' is now a pre-selected option, so when the page loads option 2 is already selected. You can verify now that making changes in the selected items will correctly take that pre-selected option into account.

As an end note, I truly suggest that if you really have trouble understanding all that's going on here, you try to get your page working with a regular multi-select element (using the 'ctrl' key to select more than one at a time) and once you have it all working as you want it to, add this desired feature. Good luck! :)