make query string based on input selector

Question

on a user input form, i have some input. some of them bind to datalist and datalist has id & value like this:

<input list="browserList" id="browser" value="opera"/>
<datalist id="browserList">
<option id="1" value="Chrome">
<option id="2" value="Firefox">
<option id="3" value="Opera">
<option id="4" value="Safari">
</datalist>

<input list="colorList" id="color" value="blue"/>
<datalist id="colorList">
<option id="0" value="red"/>
<option id="1" value="blue"/>
<option id="2" value="green"/>
</datalist>

<input type="text" id="name"/>
<input type="text" id="family"/>

now i try to make a query string on input text value & datalist id. so i write 2 jquery function : first fetch id from datalist

function sysGetDLID(dataListID,inputID)
{ return     $('#'+dataListID).find('option[value="'+$('#'+inputID).val()+'"]').attr('id'); }

and next :

function inputSelector2QueryString(whatSelector)
 { var queryString = '';
   $(whatSelector).each(function() 
    { var elem=$(this); 
      queryString = queryString 
                  + '&' 
                  + elem.id 
                  + '=' 
                  + (elem.attr('list')!=='' 
                    ? sysGetDLID(elem.id+'List',elem.val())
                    : elem.val()); });
 return queryString; }

but when i call inputSelector2QueryString to make query string nothing return. why?

Answer 1

Instead of

elem.id

you have to do

elem.attr("id")

(or this.id, too)

because elem is a jQuery object.

In your code, elem.id was undefined, so concatenating to the other strings also resulted in an unwanted value

Cheers