如何使用GET方法更改URL表单？

Question

形式：

<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>

如何使用GET方法更改网址表单？

之前：测试？cat3 = 1＆amp; cat3 = 5＆amp; cat3 = 8＆amp; cat3 = 18

之后：测试？cat3 = 1,5,8,18

我想使用jQuery。

非常感谢！

Answer 1

你走了！这个例子，使用jQuery，将抓住您的表单元素，因为您的问题是询问并执行对所需URL的GET请求。您可能会注意到编码为“％2C”的逗号 - 但是当您在服务器端读取数据时，这些将自动解码。

$(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

我的朋友找到了解决方案：

＆＃13;

＆＃13;

$(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();
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;