conditional jQuery to do with where one is navigating to in a form for element B when departing element A

Our shuffle lists have a bug in which if something is selected at the left side when a form is submitted, it is added into the end result as though the item had been moved to the right side of the shuffle list.

Addendum 8/20/2015: I am commenting out http://a.yfrog.com/img610/9010/0ayd.jpg which yfrog has seen fit to replace with some sort of iTunes advertisement. I wish I had not started up my blog hosting images with these clowns.

 
 

I'm trying to fix this today. I have an idea of how to do so. I wrote my own little form in an attempt to iron out the jQuery needed:

<table>

   <tr>

      <td>

         <select multiple size="4" id="choices">

            <option value="foo">foo</option>

            <option value="bar">bar</option>

            <option value="baz">baz</option>

            <option value="qux">qux</option>

         </select>

      </td>

      <td>

         <input type="button" id="moveright" value=">" />

      </td>

      <td>

         <input id="fillintheblank" />

      </td>

   </tr>

   <tr>

      <td colspan="3" align="right">

         <input type="submit" id="submit" value="submit"/>

      </td>

   </tr>

</table>

<script type="text/javascript">

   $(function () {

      $('body').click(function () {

         emptylist();

      });

      $("#choices").click(function (e) {

         e.stopImmediatePropagation();

      });

      $("#moveright").click(function (e) {

         e.stopImmediatePropagation();

         uselistthenemptylist();

      }).keypress(function (e) {

         switch (e.keyCode) {

            case 13:

               uselistthenemptylist();

               return false;

         }

      }).blur(function (e) {

         emptylist();

      });

   });

   function emptylist() {

      var counter;

      var select = document.getElementById("choices");

      for (counter = 0; counter < select.options.length; counter++) {

         select.options[counter].selected = false;

      }

   }

   function uselistthenemptylist() {

      var contents = "";

      $("#choices option:selected").each(function () {

         contents += $(this).val();

      });

      $("#fillintheblank").val(contents);

      emptylist();

   }

</script>

 
 

Herein I want to:

1. deselect all selections in select list in almost all circumstances when one leaves the select list for another point on the form in order to guarantee that nothing is selected when one submits the form
2. empower the ability to move the contents of the select list to the text field by way of the button labeled with an arrow (a greater than sign) without such an ability being sabotaged by the first goal

The first item suggests a global rule while the second item is the exception.

My doings here work, though I have not yet had luck translating this success to our shuffle lists.

Things to note:

1. e.stopImmediatePropagation(); keeps emptylist(); from happening at $('body').click in two exceptions to our global rule.
2. .val() retrieves the hidden value of a line item in a select list while .text() retrieves the public-facing value
3. return false; is used in wiring up what happens when one presses enter at the button labeled with an arrow when I might otherwise use break; as break; failed to allow copy to be moved into the text field.
4. I cannot make a global .focus event and attach it to the body the way I can a .click event as the body will never leave focus, therefore, I have to ask myself how my process could be sabotaged by way of a key stroke.
   
   • One cannot submit the form by pressing return while the select list is the item of focus. Pressing return from such a vantage point would be like clicking the button labeled with an arrow.
   • One could tab to another element on the page so I had better wipe the contents of the select list in a .blur event for the select list. Wait! That would sabotage the button labeled with an arrow, so instead I will put the .blur event at the button labeled with an arrow. Thus one may tab once from the select list without values being lost, but not twice (and only in tabbing twice does a user enter a place where the return key will submit the form).