JavaScript misreads values

Hi Experts,

Please consider the following options:
                        <option value="23">Clarion Hotel and Suites </option>
                        <option value="60">Clarence Park (Castle) </option>
                        <option value="163">CN Tower North </option>
                        <option value="175">CN Tower South </option>

Open in new window


I have a js that reads all values and dumps them in a textbox
function updateSubmitIDs(){
    
    var fromIDs = document.getElementById('txtIDsFor').value;
    var lstIDs = document.getElementById(fromIDs);
    var IDs = '';
    
    if (lstIDs.length != 0) {
        for (i = 0; i < lstIDs.length; i++){
            IDs = IDs + lstIDs.options[i].value + ',';
        }
    }
    else{
        IDs = ' ';
    }
    
    document.getElementById('txtSubmitIDs').value = IDs;
}

Open in new window


As a result, I expect 23,60,163,175

However, whenever the Text has parenthesis, I get the text and not the value.  So, instead I get
23,Clarence Park (Castle) ,163,175

Why is this, and how do I fix it?
APD TorontoSoftware DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Tried to reproduce the problem in this jsfiddle, but could not.

http://jsfiddle.net/tommyBoy/k808se25/

Must have something to do with the lines I had to comment out.
0
Alexandre SimõesManager / Technology SpecialistCommented:
For me it works as expected.
Here's my sample code: http://jsfiddle.net/AlexCode/7ycb68e5/
0
APD TorontoSoftware DeveloperAuthor Commented:
OK, I thought it was in my stripped-down code above, but it isn't...

Below, is a prototype of what is happening.  From the right, if you click Clarion and then add, you will see that txtSubmitIDs gets 23 (as it should), but then if you click Clarence, txtSubmitIDs get the text.

I realize that this is not in my code above, but what am I doing wrong? Is it my resort function?

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            #assoc-container{
                /*border: 1px solid black;*/
                margin: 15px auto;
                width: 1000px;
                height: 110px;
            }
            
            #left{
               float: left;
               display: inline;
               width: 300px;
                
            }  

            .assoc_buttons{
                width: 100px;
                margin-bottom: 7px;
            }
            
            #assoc_btn_container{
               float: left;
               display: inline;
               width: 100px;  
               margin-left: 10px;
               margin-right: 10px;
            } 
            
            #right{
               float: left;
               display: inline;
               width: 300px;
                
            }
            
            .hidden{
                clear: both;
     
            }
        </style>

    </head>
    <body>
      
    <form id="frm" name="frm">

        <div id="assoc-container">
            
            <select name="left" id="left" size="7">
            </select>

            <div id="assoc_btn_container">
                <input type="button" class="assoc_buttons" name="btn_add" value="< Add" onclick="moveItem('right', 'left');"><br>
                <input type="button" class="assoc_buttons" name="btn_add_all" value="<< Add All" onclick="moveAll('right', 'left');"><br>
                <input type="button" class="assoc_buttons" name="btn_del" value="Delete >" onclick="moveItem('left', 'right');"><br>
                <input type="button" class="assoc_buttons" name="btn_del_all" value="Delete All >>" onclick="moveAll('left', 'right');">
            </div>
            
            <select name="right" id="right" size="7">
                <option value="23">Clarion Hotel and Suites </option>
                <option value="60">Clarence Park (Castle) </option>
                <option value="163">CN Tower North </option>
                <option value="175">CN Tower South </option>
            </select>
            
            <div class="hidden">                
                
                
                txtIDsFor:  <input type="text" id="txtIDsFor" name="txtIDsFor" value="left"><br>
                txtSubmitIDs: <input type="text" id="txtSubmitIDs" name="txtSubmitIDs" value=""><br>
                chkUpdated: <input type="checkbox" id="chkUpdated" name="chkUpdated">
            </div>
            
        </div>

    </form>
        <script type="text/javascript"    >
//This JS transfers items between list boxes

function moveItem(lstFrom, lstTo){
        
        var from = document.getElementById(lstFrom);
        var to = document.getElementById(lstTo);
        
        if (from.selectedIndex == -1){
            alert ("No Locations were selected to be move.");
            return false;
        }
        
        var i = from.selectedIndex;
        var newVal = from.options[i].value;
        var newText = from.options[i].text;
        
        //Remove from item
        from.removeChild(from.options[i]);
        
        //Add to item
        to.options[to.options.length] = new Option(newText, newVal);
        
        //sort to
        reSort(lstTo);        
        
        updateSubmitIDs();
        document.getElementById('chkUpdated').checked = true;
    }
    
    function moveAll(lstFrom, lstTo){
        
        var from = document.getElementById(lstFrom);
        var to = document.getElementById(lstTo);
        
        var newVal = '';
        var newText = '';
        
        for (i = 0; i < from.length; i++){
            newVal = from.options[i].value;
            newText = from.options[i].text;
            
            to.options[to.options.length] = new Option(newText, newVal);
            
        }
                
        //Remove from items
        for (i = (from.length - 1); i >= 0; i--){
            from.removeChild(from.options[i]);
        }
        
        reSort(lstTo);
        updateSubmitIDs();

        document.getElementById('chkUpdated').checked = true;
}
    
function reSort(listName){
        
        var lstBox = document.getElementById(listName);
         
        var arrTexts = new Array();
        var arrValues = new Array();
        
        //Copy options to arrays
        for (i = 0; i < lstBox.length; i++){
            arrTexts[i] = lstBox.options[i].text;
            arrValues[i] = lstBox.options[i].value;
        }
        
        //Sort texts and copy to new array
        var arrTextsSorted = new Array();
        var arrValuesSorted = new Array();
        
        //List texts in alpha-order
        arrTextsSorted = arrTexts.slice().sort();
                
        for (i = 0; i < lstBox.length; i++){
            
            //Locate text's assoc ID            
            for (j = 0; j < arrTexts.length; j++){
                
                if (arrTextsSorted[i].match(arrTexts[j])){
                    arrValuesSorted[i] = arrValues[j];
                    break;
                }
            }
        }
        
        //Empty list box
        for (i = (lstBox.length - 1); i >= 0; i--){
            lstBox.removeChild(lstBox.options[i]);
        }    
        
        //Re-populate list
        for (i = 0; i < arrTexts.length; i++){
            lstBox.options[i] = new Option(arrTextsSorted[i], arrValuesSorted[i]);
        }
    }

function updateSubmitIDs(){
    
    var fromIDs = document.getElementById('txtIDsFor').value;
    var lstIDs = document.getElementById(fromIDs);
    var IDs = '';
    
    if (lstIDs.length != 0) {
        for (i = 0; i < lstIDs.length; i++){
            IDs = IDs + lstIDs.options[i].value + ',';
        }
    }
    else{
        IDs = ' ';
    }
    
    document.getElementById('txtSubmitIDs').value = IDs;
}        
    </script>
    </body>  
</html>

Open in new window

0
Tom BeckCommented:
Change this portion of your reSort function.
for (i = 0; i < lstBox.length; i++){
            
            //Locate text's assoc ID            
            for (j = 0; j < arrTexts.length; j++){
                
                if (arrTextsSorted[i] === arrTexts[j]){
                    arrValuesSorted.push(arrValues[j]);
                    break;
                }
            }
        }

Open in new window

In the inner loop, you cannot assign arrValues "j"  to arrValuesSorted "i" because "i" may not be the next index in arrValuesSorted since "i" is in the outer loop. Use Array.push to keep undefined objects out of the arrValuesSorted array.

Javascript match() returns an array rather than a boolean. Just use a simple === to match strings.

In re-adding the options, where the option value was undefined, the option's text was used automatically as the value. The match() function was mixing up the value and text pairs.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
Thank you
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.