Использование Javascript для преобразования формы с массивами в разделенных запятыми строк запроса без дубликатов

Question

Я хочу изменить строку запроса из

? FirstArray [] = 0001 & firstArray [] = 0002 & secondArray [] = 0003 & secondArray [] = 0004 в ? firstArray = 0001,0002 & secondArray = 0003,0004

Я думаю, что я почти там, но проблема у меня есть, что значения массива одинаковы для обоих массивов после мой javascript сделан processi в форме. Вот форма:

<form method="get" action="" class="productFilter"> 
    <input type="checkbox" name="firstArray[]" id="" value="0001">0001 
    <input type="checkbox" name="firstArray[]" id="" value="0002">0002 
    <input type="checkbox" name="secondArray[]" id="" value="0003">0003 
    <input type="checkbox" name="secondArray[]" id="" value="0004">0004 
    <input type="submit" name="submit" value="test"> 
</form> 

И вот Javacript/JQuery:

$('.productFilter').on('submit', function() { 

var newVal = []; 
var seen = {}; 

// Gather values into array. 
$('input[name$="[]"]:checked').each(function() { 
    newVal.push($(this).val()); 
}); 

// Make comma-separated list of values. 
var commaSeparated = newVal.join(','); 
console.log(commaSeparated); 

// Remove duplicates so an 'array' is only listed once in the query string. 
$('input[name$="[]"]:checked').each(function() { 
    var name = $(this).attr('name'); 
    if (seen[name]) { 
     $(this).remove(); 
    } 
    else { 
     seen[name] = true; 
    } 
    $(this).attr('name', name.slice(0, -2)).val(commaSeparated); 
}); 

});

Я понимаю, почему мой вар «» содержит запятую значения обоих входов firstArray и secondArray, поэтому, когда я проверяю все коробки, в результате строка запроса:

firstArray = 0001,0002,0003, 0004 & secondArray = 0001,0002,0003,0004 , когда я хочу, чтобы это было ? firstArray = 0001,0002 & secondArray = 0003,0004

Я не уверен, как это исправить, хотя. Мне нужно будет хранить значения массивов форм в отдельных переменных, не так ли? Следует отметить, что я не знаю, сколько элементов формы будет и что они будут вызывать в моем производственном коде.

Answer 1

моя стратегия будет

• во-первых, собрать все поля ввода, которые принадлежат к массивам,
• собирать значения в хэш, используя имя массива в качестве ключа, отведя их в массив
• удалить их из DOM
• затем, на второй стадии, петлю на хэш с помощью его ключей,
• ввода новых полей формы настройки имени массива в качестве имени атрибута, а в качестве значения атрибута хэша-элемент у alue = массив, содержащий все значения, проверенные пользователем.

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

$('.productFilter').on('submit', function() { 

     var arrayValues = {}; 

     // Gather values into a hash, the keys being the array names 
     $('input[name$="[]"]').each(function(index,item) { 
      if (item.checked) { 
      var arrayName = item.name.replace(/\[\]$/,""); 
      if (!arrayValues.hasOwnProperty(arrayName)) arrayValues[arrayName] = []; 
      arrayValues[arrayName].push(item.value); 
      } 
      $(item).remove(); 
     }); 

     // Create new form fields with the collected values per array 
     Object.keys(arrayValues).forEach(function(key) { 
     $("form").append( 
      $('<input type="hidden"></input>') 
       .val(arrayValues[key]) 
       .attr("name",key)); 
     });  

    }); 

Answer 2

Я думаю, что интересный подход может заключаться в использовании свойств объекта, чтобы помочь однозначно сортировать ваши параметры и значения. Этот код использует сокращение по массиву проверенных входов, но вы можете сделать это с помощью более традиционных циклов, если хотите.

$('.productFilter').on('submit', function() { 
 
    // ----------------------- 
 
    // convert our select results to an array 
 
    // ----------------------- 
 
    var checkedInputs = $.makeArray($('input[name$="[]"]:checked')); 
 
    // ----------------------- 
 

 
    // ----------------------- 
 
    // convert the array of inputs into an object with nested properties 
 
    // ----------------------- 
 
    var checkedInputsObj = checkedInputs.reduce(function(obj, item){ 
 
    obj[item.name] = (obj[item.name] || {}); 
 
    obj[item.name][item.value] = true; 
 
    return obj 
 
    }, {}); 
 
    // ----------------------- 
 
    
 
    // ----------------------- 
 
    // Build our querystring 
 
    // ----------------------- 
 
    var qs = (function(obj){ 
 
    var _qs = "?"; 
 

 
    for (var param in obj){ 
 
     _qs += param.slice(0, -2) + "="; 
 
     for (var val in obj[param]){ _qs += val + ","; } 
 
     _qs = _qs.slice(0, -1) + "&"; 
 
    } 
 

 
    return _qs.slice(0, -1); 
 

 
    })(checkedInputsObj); 
 
    // ----------------------- 
 

 
    console.log(qs) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="get" action="" class="productFilter"> 
 
    <input type="checkbox" name="firstArray[]" id="" value="0001">0001 
 
    <input type="checkbox" name="firstArray[]" id="" value="0002">0002 
 
    <input type="checkbox" name="secondArray[]" id="" value="0003">0003 
 
    <input type="checkbox" name="secondArray[]" id="" value="0004">0004 
 
    <input type="submit" name="submit" value="test"> 
 
</form>

Answer 3

var checked_first = [] 
    $("input[name='firstArray[]']:checked").each(function() 
    { 
     checked_first.push($(this).val()); 
    }); 

var checked_second = [] 
    $("input[name='secondArray[]']:checked").each(function() 
    { 
     checked_second.push($(this).val()); 
    }); 

Получить значение выбранной для каждого массива

Answer 4

Один из способов сделать это с чистым JS (не JQuery) может быть как;

var f = document.querySelector("form"), 
 
    cba1 = Array.from(f.querySelectorAll("input[name='firstArray[]']")), 
 
    cba2 = Array.from(f.querySelectorAll("input[name='secondArray[]']")); 
 
f.onsubmit = function(e){ 
 
var fStr = cba1.reduce((p,c) => c.checked ? p.concat(c.value) : p,[]).join(","), 
 
    sStr = cba2.reduce((p,c) => c.checked ? p.concat(c.value) : p,[]).join(","), 
 
    qStr = !!fStr || !!sStr ? "?" : ""; 
 
!!fStr && (qStr+= "firstArray=" + fStr); 
 
!!fStr && !!sStr && (qStr+="&"); 
 
!!sStr && (qStr+= "secondArray=" + sStr); 
 
    console.log(qStr); 
 
}

<form method="get" action="" class="productFilter"> 
 
    <input type="checkbox" name="firstArray[]" id="" value="0001">0001 
 
    <input type="checkbox" name="firstArray[]" id="" value="0002">0002 
 
    <input type="checkbox" name="secondArray[]" id="" value="0003">0003 
 
    <input type="checkbox" name="secondArray[]" id="" value="0004">0004 
 
    <input type="submit" name="submit" value="test"> 
 
</form>

Это будет нормально, как много флажков, как у вас есть на firstArray или secondArray. Я бы рекомендовал вам заменить стрелки (уменьшить обратные вызовы) на обычные функции, если вам нужна эта работа в Safari и IE.