Question

I am trying to create a unique taskID list based on the selections. Each task may have 2 companies at the most. My problem is the taskID comparison below fails. My code:

<script>
$().ready(function() { 

  $.validator.addMethod(
        "findRegex",
        function(value, element) {
            return /^.+::[1-9]\d{0,11}$/.test(value);
        },
        "Please check your input."
   );

    $('#myForm').validate({
            submitHandler: function(form){
                $("#formSub").html('<table style="font-size:11px; color:#333;"><tr><td><img border="0" src="images/ajax-loader.gif"/></td><td>Saving! Please wait...</td></table>');
                var options = { 

                    success: showResponse,
                    url:'addValidation2.cfm?t=1' 
                };
                $('#myForm').ajaxSubmit(options);
                return false;   
            }
    });

      $('select[name^=compName]').change(function() {
            var tid = $(this).attr('name').split('-')[1];
            var j   = $(this).attr('name').split('-')[2];
            var currTaskIDs = $("#taskIDList").val();

            // begin: create the task list:
            var arr = [];
            var arr2 = [];
            var arr3 = [];
            if (currTaskIDs != '') {
                if( $.inArray(currTaskIDs, arr2) == -1) {
                    arr2.push(currTaskIDs);
                }
            } 

            if( $.inArray(tid, arr) == -1) {
                arr.push(tid);
            } 

            arr3 = unionArr(arr,arr2);
            alert(arr3);
            $("#taskIDList").val(arr3);
            // end
        });

        unionArr = function(x, y) {
          var obj = {};
          for (var i = x.length-1; i >= 0; -- i)
             obj[x[i]] = x[i];
          for (var i = y.length-1; i >= 0; -- i)
             obj[y[i]] = y[i];
          var res = []
          for (var k in obj) {
            if (obj.hasOwnProperty(k))  
              res.push(obj[k]);
          }
          return res;
        }


    $("input[name^=compName-]").each(function() {
       $(this).rules("add", { findRegex: true });
    });
});
 </script>

<form id="myForm" name="myForm" method="post" action="">

task : 35
<select name="compName-35-1" id="compName-35-1">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 

<select name="compName-35-2" id="compName-35-2" style="padding-left:20px;">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

  task : 36
<select name="compName-36-1" id="compName-36-1">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 

<select name="compName-36-2" id="compName-36-2" style="padding-left:20px;">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 
<hr/>

  task : 37
<select name="compName-37-1" id="compName-37-1">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 

<select name="compName-37-2" id="compName-37-2" style="padding-left:20px;">
    <option value=""></option>
    <option value="acme inc::30">acme inc::30</option>
    <option value="my company::54781">my company::54781</option>
    <option value="abc llc::42443">abc llc::42443</option>
    <option value="zzzz">zzzz</option>
</select> 

<hr/>

<input type="submit" name="btnSave" id="btnSave" value="Save"/>
<hr/>
<input type="text" name="taskIDList"  id="taskIDList" value="" />
<div id="formSub"></div>

1. i select two companies for task 35. taskIDList textbox displays 35. < pass >
2. i select two companies for task 36, taskIdList textbox displays : 36,36,35 < fail >
   it should be displaying 36, 35.
3. i select one company for task 37, taskIdList correctly adds 37 to the list. Then I change the company, then the taskIdList becomes 37,37,36,36,35 : < fail >

how can i make sure that the list is unique ?

thanks in advance

Answer 1

Looking at this as a problem of simply removing duplicates from your final list, you can write a little function like the one shown in this SO answer. Putting aside any concerns with modifying objects you don’t own to add this functionality (and the fact that it’s O(n^2)), the function lets you do this:

var theArray = [37,37,36,36,35];
var theUniqueArray = theArray.unique(); // -> [37,36,35]

---

Edit: I fixed up your fiddle. You had a bunch of issues. Take a look here.

A few things:

• You don’t need to add <script> tags in jsFiddle
• You don’t need to add $(document).ready(...) around your code in jsFiddle.
• Since Array.prototype.unique = function()... is a function expression, it is not hoisted. I moved it above your other code.

• You’re looping from zero to the length of currTaskIDs, which is a string, not an array. Thus when its value is 35,36, that’s five iterations, not two. Since the unique function operates on arrays, I’ve changed the string to an array:

  if (currTaskIDs.length) arr = currTaskIDs.split(',');
  

• Next we append the currently selected value to the array, if applicable:

  if (tid.length) arr.push(tid);
  

• Finally we run the unique function that started this whole exercise, then turn the whole mess back into a string and plop it into your field:

  var u = arr.unique();
  $("#taskIDList").val(u.join(','));