Spaces Removed From formToData smart-select items

I am using smart-select in a form to select multiple items, some containing spaces. After using formToData, the spaces in the items selected are removed. How do I avoid that from happening?

Example code:

HTML:

<li>
  <a href="#" class="item-link smart-select"  data-open-in="picker">
        <select id="category" name="Category" multiple>
              <!-- javascript select items go here -->
        </select>    
        <div class="item-content">
              <div class="item-inner"> 
                 <div class="item-title">Category</div>
                 <div class="item-after" id="disp-cat"></div>
              </div>  
       </div>
   </a> 
</li>

Javascript:

//get current category list from server

 $$.getJSON(siteURL.concat('categories'),function(data){
     categoryItems = data;
          for (var i in data) {
              var obj = data[i]; // This will store each category object,
                                         // spaces are maintained here!
              categories.push(obj.JobCategory);
            }
        cssClass = '.smart-select select#category';    
        generateOptions(categories, cssClass); 
 });

//assign selected items to jobObj --during this assignment, spaces are removed!
jobObj = myApp.formToData(’#job-form’);

Can you show an example of what items with spaces contain and what is in resulting JSON?

The actual JSON returned for categories is:

[ { “JOBCATID”: “1”, “JobCategory”: “Yard Work” }, { “JOBCATID”: “2”, “JobCategory”: “Painting” }, { “JOBCATID”: “3”, “JobCategory”: “Clear-Outs” }, { “JOBCATID”: “4”, “JobCategory”: “Organizing” }, { “JOBCATID”: “5”, “JobCategory”: “Errands” }, { “JOBCATID”: “6”, “JobCategory”: “House & Pet” }, { “JOBCATID”: “7”, “JobCategory”: “Events” }, { “JOBCATID”: “8”, “JobCategory”: “Office” }, { “JOBCATID”: “9”, “JobCategory”: “Moving Help” }, { “JOBCATID”: “10”, “JobCategory”: “Heavy Labor” }, { “JOBCATID”: “11”, “JobCategory”: “Cleaning” }, { “JOBCATID”: “12”, “JobCategory”: “Skilled Office” }, { “JOBCATID”: “13”, “JobCategory”: “Specialty” }, { “JOBCATID”: “14”, “JobCategory”: “Other” }, { “JOBCATID”: “15”, “JobCategory”: “Handyman” }, { “JOBCATID”: “16”, “JobCategory”: “Shoveling” }, { “JOBCATID”: “17”, “JobCategory”: “Volunteer” }, { “JOBCATID”: “18”, “JobCategory”: “Bonus & Points” } ]

This is what is returned by the JSON as held in my “categories” array:

[“Yard Work”, “Painting”, “Clear-Outs”, “Organizing”, “Errands”, “House & Pet”, “Events”, “Office”, “Moving Help”, “Heavy Labor”, “Cleaning”, “Skilled Office”, “Specialty”, “Other”, “Handyman”, “Shoveling”, “Volunteer”, “Bonus & Points”]

Here is a screen shot of what I am doing; user can select one or multiple categories (in this case “Yard Work” which contains a space)

image

Once “Yard Work” is selected, the value is represented properly with the space as shown in the screen shot. I then use formToData to create my object containing all the form data, which results in the following immediately after the formToData call:

Category: [“YardWork”]

UPDATE: I found the issue; I was removing the white space when I generate the Options dynamically for the smart select. (I forgot I had done this). The reason I did this is otherwise when selecting from multiple items where the first word is the same, the first occurrence is always returned form the smartSelect (For example if I had two choices (“Other Outdoor” and “Other Indoor”, when selecting either the smart select item would always be the first). This is because only the first word is selected for inclusion as the Option for the smart select.

(Should I delete this question and resubmit since this really was not an issue with the formToData as I first suspected? I can add a new question specific to the issue as finally described above)

> function generateOptions(options, cssClass) {
>    //this function is used to generate options selections dynamically
>    for (var i in options) {
>        //must remove white space to use in value otherwise
>        //"Other Contact" and "Other Word of Mouth" would both resolve to first
>        //"Other..."
>        optionValue = options[i].replace(/ /g,'');
>         myApp.smartSelectAddOption(
>            cssClass, 
>            '<option value='+ optionValue + '>' + options[i] + '</option>'
>        );
>    }
>    
> }

Ok issue completely resolved, I just needed to include quotes in the option assignment as:

Change this:
`

> '<option value='+ optionValue + '>' + options[i] + '</option>'

`

To this:
`

'<option value="'+ optionValue + '">' + options[i] + '</option>'

`

So sorry for the distraction Vladimir, can you completely delete this post?

Let it be here if someone else face same issue