JQuery для создания строки из атрибутов входных данных

Question

Я создаю форму поиска, которая захватывает атрибуты данных из входных данных формы, создает массив и затем преобразует его в строку для отправки на вызов поиска API.

Мой HTML является:

 <input data-group="filters" data-param="month"> 
     <input data-group="filters" data-param="year">    
     <input data-group="filters" data-param="name"> 
     <button data-input="filters" id="search">Search</button>  

My JS является:

$('#search').on('click', function() {  
     var input_group = $(this).data('input'); 
     var inputs = $('input[data-group="' + input_group + '"]'); 
     var values = [];   
     $(inputs).each(function() { 
      values.push($(this).data("param")); 
      values.push($(this).val());  
     });  
     str = values.join([separator = '&']); 
     str = 'http://www.example.com/search/?' + str; 
    }); 
}); 

str в настоящее время гласит:

http://www.example.com/search/month&January&year&2015&name&Jane 

но то, что я хочу это:

http://www.example.com/search/?month=January&year=2015&name=Jane 

Как вставить = между month и January, а затем следить за ним с помощью &?

Answer 1

Вы уверены, что не можете использовать входы name атрибутов? Если это так, вы можете просто использовать jQuery's serialize.

Если вам нужно идти вперед с тем, что у вас есть прямо сейчас, причина, вы видите это поведение, потому что вы добавляете как имя и значение того же массива:

values.push($(this).data("param")); 
values.push($(this).val());  

.. и последующее объединение их с & в качестве разделителя.

Вы должны добавить = где вы добавляете элементы:

values.push(
    $(this).data("param") + "=" + $(this).val() 
); 

Answer 2

$('#search').on('click', function() {  
     var input_group = $(this).data('input'); 
     var inputs = $('input[data-group="' + input_group + '"]'); 
     var values = [];   
     $(inputs).each(function() { 
      // Differences start 
      var full_parameter = values.push($(this).data("param")); 
      full_parameter += '='; 
      full_parameter += $(this).val(); 

      values.push(full_parameter); 
      // Differences end  
     });  
     str = values.join([separator = '&']); 
     str = 'http://www.mysite.com.au/search/?' + str; 
    }); 
}); 

Answer 3

Вы можете достичь его с помощью

$(inputs).each(function() { 
    values.push($(this).data("param") + "=" + $(this).val()); 
}); 

вместо

$(inputs).each(function() { 
    values.push($(this).data("param")); 
    values.push($(this).val());  
});