How to change URL form with GET method?

Question

Form:

<form action="/test" method="GET">
    <input name="cat3" value="1" type="checkbox">
    <input name="cat3" value="5" type="checkbox">
    <input name="cat3" value="8" type="checkbox">
    <input name="cat3" value="18" type="checkbox">
    <input type="submit" value="SUBMIT">
</form>

How to change URL form with GET method?

Before: test?cat3=1&cat3=5&cat3=8&cat3=18

After: test?cat3=1,5,8,18

I want to use jQuery.

Many thanks!

Answer 1

Here you go! This example, using jQuery, will grab your form elements as your question is asking and perform a GET request to the desired URL. You may notice the commas encoded as "%2C" - but those will be automatically decoded for you when you read the data on the server side.

$(document).ready(function(){
  $('#myForm').submit(function() {
    // Create our form object. You could optionally serialize our whole form here if there are additional parameters in the form you want
    var params = {
      "cat3":""
    };
    
    // Loop through the checked items named cat3 and add to our param string
    $(this).children('input[name=cat3]:checked').each(function(i,obj){
      if( i > 0 ) params.cat3 += ',';
      params.cat3 += $(obj).val();
    });
    
    // "submit" our form by going to the properly formed GET url
    var url = $(this).attr('action') + '?' + $.param( params );

    // Sample alert you can remove
    alert( "This form will now GET the URL: " + url );

    // Perform the submission
    window.location.href = url;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/test" method="GET" id="myForm">
    <input name="cat3" value="1" type="checkbox">
    <input name="cat3" value="5" type="checkbox">
    <input name="cat3" value="8" type="checkbox">
    <input name="cat3" value="18" type="checkbox">
    <input type="submit" value="SUBMIT">
</form>

Answer 2

My friend found a solution:

$(document).ready(function() {      
  // Change Url Form: &cat3=0&cat3=1&cat3=2 -> &cat3=0,1,2
  var changeUrlForm = function(catName){
    $('form').on('submit', function(){
      var myForm = $(this);
      var checkbox = myForm.find("input[type=checkbox][name="+ catName +"]");
      var catValue = '';
      checkbox.each(function(index, element) {
        var name = element.name;
        var value = element.value;
        if (element.checked) {
          if (catValue === '') {
            catValue += value;
          } else {
            catValue += '‚' + value;
          }
          element.disabled = true;
        }
      });

      if (catValue !== '') {
        myForm.append('<input type="hidden" name="' + catName + '" value="' + catValue + '" />');
      }
    });
  };

  // Press 'Enter' key
  $('.search-form .inputbox-search').keypress(function(e) {
    if (e.which == 13) {
      changeUrlForm('cat3');
      changeUrlForm('cat4');
      alert(window.location.href);
    }
  });

  // Click to submit button
  $('.search-form .btn-submit').on('click', function() {
    changeUrlForm('cat3');
    changeUrlForm('cat4');
    alert(window.location.href);
    $(".search-form").submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/test" method="GET" class="search-form">
    <input name="cat3" value="1" type="checkbox">1  
    <input name="cat3" value="3" type="checkbox">3  
    <input name="cat3" value="5" type="checkbox">5  
    <input name="cat3" value="7" type="checkbox">7  
  <br />
    <input name="cat4" value="2" type="checkbox">2  
    <input name="cat4" value="4" type="checkbox">4  
    <input name="cat4" value="6" type="checkbox">6  

    <br />
    <br />
    <a href="#" class="btn-submit">Submit</a>
    <br />
    <br />
    <input type="text" placeholder="Search" class="inputbox-search" /> 
</form>